search

framer / motion

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

[BUG] ReferenceError: React is not defined Just by importing framer-motion #2627

Closed juanboterotech closed 3 weeks ago

juanboterotech commented 1 month ago

I'm started to work with a React project which uses framer to animate elements in sidebar after login screen, but it is causing console error when importing: Uncaught ReferenceError: React is not defined

I tested just by importing the library in login component, without using the library and is causing me the same behavior.

I try to import like this: import { AnimatePresence, motion } from "framer-motion/dist/framer-motion"; The web site is just a blank screen, the console show this:

Uncaught ReferenceError: React is not defined at framer-motion.js:1:1 at framer-motion.js:1:1 at ./node_modules/framer-motion/dist/framer-motion.js (framer-motion.js:1:1) at __webpack_require__ (bootstrap:789:1) at fn (bootstrap:150:1) at ./src/modules/auth/components/login-form/LoginForm.jsx (LoginForm.css:45:1) at __webpack_require__ (bootstrap:789:1) at fn (bootstrap:150:1) at ./src/modules/auth/components/login/Login.jsx (LoginForm.jsx:125:1) **End of file** at __webpack_require__ (bootstrap:789:1) at fn (bootstrap:150:1) at ./src/modules/auth/AuthModule.jsx (index.js:9:1) at __webpack_require__ (bootstrap:789:1) at fn (bootstrap:150:1) at ./src/App.js (App.css:45:1) at __webpack_require__ (bootstrap:789:1) at fn (bootstrap:150:1) at ./src/index.js (index.css:45:1) at __webpack_require__ (bootstrap:789:1) at fn (bootstrap:150:1) at 1 (useAuth.jsx:9:1) at __webpack_require__ (bootstrap:789:1) at checkDeferredModules (bootstrap:45:1) at Array.webpackJsonpCallback [as push] (bootstrap:32:1) at main.chunk.js:1:69 In package.json i'm using versión 11.1.3 "framer-motion": "^11.1.3",

Steps to reproduce

  1. Go to any component and import framer-motion lib
  2. Refresh the browser page
  3. See error in console

Expected behavior

Components and elements load

6. Video or screenshots image

Tested with Chrome, Edge with same result

mattgperry commented 4 weeks ago

Why aren't you importing 

import { AnimatePresence, motion } from "framer-motion"
juanboterotech commented 4 weeks ago

Why aren't you importing

import { AnimatePresence, motion } from "framer-motion"

when I Try in that way i got this error in terminal.

Failed to compile.

./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
Can't import the named export 'Children' from non EcmaScript module (only default export is available)
mattgperry commented 4 weeks ago

Could you be running into this: https://github.com/framer/motion/issues/1525#issuecomment-1177081896