search

framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
23.33k stars 777 forks source link

[BUG] Framer-motion-3D - Can't import the named export 'Color' from non EcmaScript module (only default export is available) #2159

Open AxiomeCG opened 1 year ago

AxiomeCG commented 1 year ago

Description of the bug

When using import { motion } from "framer-motion-3d" with Webpack, it fails to compile. It seems to relate to the same issue we have with the framer-motion package in the issue #1525 but cannot make work a workaround similar to the one we find for the normal package.

Failed to compile.

./node_modules/framer-motion-3d/dist/es/render/utils/set-value.mjs
Can't import the named export 'Color' from non EcmaScript module (only default export is available)

Have you a quick fix to make the 3D package for react-three-fiber usage ?

ArsenSheripov commented 1 year ago

I have a similar problem.

Uncaught Error: require() of ES Module /Users/purrweb/momentum-max-frontend/node_modules/framer-motion-3d/node_modules/react-merge-refs/dist/index.mjs not supported.

I can solve it by adding the {"type": "module"} line to the package.json of framer-motion-3d. But this will only help on localhost.

I use "framer-motion": "10.12.16", "framer-motion-3d": "10.12.16", "next": "13.4.4",

AlexJamisone commented 4 months ago

Try adding this to next.config.mjs

transpilePackages: ['framer-motion-3d']