Error: Invalid tag: [object Object] about react-magic-motion HOT 16 OPEN

So in your example, the problematic component was the components from @phosphor-icons/react. The error can be fixed by add key="exclude to both the <Sun> and <Moon> components.

Adding key="exclude" prevents the specified tags from being auto-animated by the <MagicMotion> tag.

A working example is found here:
https://codesandbox.io/s/recursing-bell-yxdr6z?file=/src/App.tsx

There isn't anything really being animated here though as there are no layout shifts or changes from conditional rendering, so it probably doesn't make much sense to add the tag here.

from react-magic-motion.

Yeah, so whenever you get Error: Invalid tag: [object Object] that means that there is a problem with one of the children of the MagicMotion tag. You can try adding key="exclude" to each potential child that you suspect to be causing the problem. (note: doing this will stop the child from being animated though).

It would be nice if I could see some of the code. That would be very helpful.

from react-magic-motion.

Thanks to @zemariagp many instances of this error should be fixed in version 1.1.1 of react-magic-motion

See release notes here: https://github.com/Etesam913/react-magic-motion/releases/tag/v1.1.1

from react-magic-motion.

Hello, I had the same error and my code is this

import { useLocalStorage } from 'usehooks-ts'
import { Sun, Moon } from '@phosphor-icons/react'
import { zinc } from 'tailwindcss/colors'
import { MagicMotion } from 'react-magic-motion'

function App() {
  const [theme, setTheme] = useLocalStorage('theme', 'light')

  useEffect(() => {
    document.body.classList.remove('light', 'dark')
    document.body.classList.add(theme)
  }, [theme])

  return (
    <MagicMotion>
      <div className="h-screen w-screen bg-white dark:bg-zinc-800">
        <div className="mx-auto sm:max-w-[800px] pt-10">
          <header className="flex items-center justify-between">
            <section className="flex items-center justify-center space-x-5">
              <h1 className="text-sm tracking-widest font-bold text-zinc-800 dark:text-white">
                HOJE
              </h1>

              <form>
                <input
                  type="text"
                  className="text-xs font-medium text-white px-2 h-8 w-64 rounded bg-zinc-200/50 dark:bg-zinc-700/50 border border-zinc-300 dark:border-zinc-600 focus:border-zinc-400 focus:dark:border-zinc-500 focus:outline-none"
                  placeholder="O que você quer fazer hoje?"
                />
              </form>
            </section>

            <button
              onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
            >
              {theme === 'dark' ? (
                <Sun size={20} weight="duotone" color={zinc[50]} />
              ) : (
                <Moon size={20} weight="duotone" color={zinc[900]} />
              )}
            </button>
          </header>
        </div>
      </div>
    </MagicMotion>
  )
}

export default App

from react-magic-motion.

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('[object Object]') is not a valid name.

Using next.js!

from react-magic-motion.

Post your code so I can see what's going on

from react-magic-motion.

Post your code so I can see what's going on

import { Button } from '@/components/ui/button'
import { LuLayoutList } from 'react-icons/lu'
import { MagicMotion } from "react-magic-motion";

export function Hero() {
  return (
    <MagicMotion>
      <div className="flex max-w-xl flex-col gap-7">
        <h1 className="mt-4 text-5xl font-bold leading-none md:mt-0 md:text-6xl">
          Text here
        </h1>

        <h4 className="text-muted-foreground max-w-md text-start">
         Text Here
        </h4>
        <div className="flex w-full flex-col gap-2 md:flex-row md:gap-4">
          <Button variant="outline" className="border-lightGray rounded-3xl font-medium md:w-44">
            Text here
          </Button>
          <Button variant="outline" className="border-lightGray rounded-3xl font-medium text-white md:w-56 ">
            <LuLayoutList size={19} className="mr-2" />
            
          </Button>
        </div>
      </div>
    </MagicMotion>
  )
}

I've tried for tests

from react-magic-motion.

Add key="exclude" to the LuLayoutList tag

ex:

 <LuLayoutList key="exclude" size={19} className="mr-2" />

This tells the library to not animate this svg

from react-magic-motion.

I'll try to see if I can add some automatic detection of these errors and throw a nicer error message to the user.

from react-magic-motion.

 <LuLayoutList key="exclude" size={19} className="mr-2" />

The same error :/

from react-magic-motion.

I have the same problem. I'm using Formik and I need an animation for the form, but Formik won't let me use it.
Any recommendation?

from react-magic-motion.

It would be nice if you could post a reproducible example in a code sandbox or something like that.

from react-magic-motion.

I´m having the same problem. Probably don't support Server side rendering ?

from react-magic-motion.

found out that any tags that are not html tags would throw that error, so wrap your component in a div and add key="exclude" to that component, or fix this lib :)

for ex:

this won't work

<MagicMotion>
  <div>
  {arr => arr.map(x => <Button>...</Button>) 
  </div>
</MagicMotion>

this will work

<MagicMotion>
  <div>
  {arr => arr.map(x => <div><Button key="exclude">...</Button></div>) 
  </div>
</MagicMotion>

from react-magic-motion.

experiencing the same. Only seems to happen on forwardRef components.
Posted a PR to get the ball rolling

from react-magic-motion.

I'd be curious to know for which (if any) cases the fix on v1.1.1 is not sufficient. Anyone?

from react-magic-motion.