react-magic-motion: Error: Invalid tag: [object Object]

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:

React
NextJS (pages)
TailwindCSS

I installed the package with bun a react-magic-motion, then wrapped the contents in my main page in <MagicMotion>, imported with import { MagicMotion } from "react-magic-motion";. I immediately get the following error:

index.js:654 Uncaught Error: Invalid tag: [object Object]
    at startChunkForTag ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:2804:13)
    at pushStartGenericElement ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:2630:15)
    at pushStartInstance ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:2908:18)
    at renderHostElement ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5636:18)
    at renderElement ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
websocket.js:50 [HMR] connected

Some potentially notable package versions I’m running:

    "next": "^13.5.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-magic-motion": "^1.0.7",

About this issue

Original URL
State: open
Created 8 months ago
Comments: 16 (9 by maintainers)

Most upvoted comments

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.

Etesam913 on Oct 27, 2023

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

Etesam913 on Nov 8, 2023

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.

Etesam913 on Oct 25, 2023