Open andromidasj opened 11 months ago
Etesam913
commented
11 months ago 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.
AndresdoSantos
commented
11 months ago 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 AppSo 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.
Snarloff
commented
11 months ago InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('[object Object]') is not a valid name.
Using next.js!
Etesam913
commented
11 months ago Post your code so I can see what's going on
Snarloff
commented
11 months ago 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
Etesam913
commented
11 months ago 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
Etesam913
commented
11 months ago I'll try to see if I can add some automatic detection of these errors and throw a nicer error message to the user.
Snarloff
commented
11 months ago <LuLayoutList key="exclude" size={19} className="mr-2" />
The same error :/
Maestroabel
commented
11 months ago 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?
Etesam913
commented
11 months ago It would be nice if you could post a reproducible example in a code sandbox or something like that.
cesarochoa2006
commented
11 months ago I´m having the same problem. Probably don't support Server side rendering ?
quangphantally
commented
11 months ago 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>
zemariagp
commented
11 months ago experiencing the same. Only seems to happen on forwardRef components. Posted a PR to get the ball rolling
Etesam913
commented
11 months ago 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
zemariagp
commented
11 months ago I'd be curious to know for which (if any) cases the fix on v1.1.1 is not sufficient. Anyone?
Hey! I have an app where I installed react-magic-motion, but am coming across this error and can't get it to work.
My app is built with:
I installed the package with
bun a react-magic-motion, then wrapped the contents in my main page in<MagicMotion>, imported withimport { MagicMotion } from "react-magic-motion";. I immediately get the following error:Some potentially notable package versions I'm running: