search

framer / motion

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

[BUG] export 'useId' (imported as 'React') was not found in 'react' (related to React 18 upgrade?) (v6.2.5) #1447

Closed ghost closed 2 years ago

ghost commented 2 years ago

1. Read the FAQs 👇

2. Describe the bug

Possibly related to React 18 upgrade? https://github.com/framer/motion/commit/986fd3f6d5aed9bf70824525f1b54db8af8b6e60

Failed to compile.

Attempted import error: 'useId' is not exported from 'react' (imported as 'React').
assets by status 11.7 MiB [cached] 370 assets
assets by status 22.2 MiB [emitted]
  assets by chunk 22.1 MiB (name: main)
    asset static/js/bundle.js 22.1 MiB [emitted] (name: main) 1 related asset
    asset main.e23771ef78d4ead04653.hot-update.js 359 bytes [emitted] [immutable] [hmr] (name: main) 1 related asset
  assets by path *.json 117 KiB
    asset asset-manifest.json 117 KiB [emitted]
    asset main.e23771ef78d4ead04653.hot-update.json 28 bytes [emitted] [immutable] [hmr]
  asset index.html 3.69 KiB [emitted]
Entrypoint main 22.1 MiB (11.8 MiB) = static/js/bundle.js 22.1 MiB main.e23771ef78d4ead04653.hot-update.js 359 bytes 30 auxiliary assets
cached modules 16.7 MiB (javascript) 541 KiB (asset) [cached] 12712 modules
runtime modules 121 KiB 23 modules

ERROR in ./node_modules/framer-motion/dist/es/utils/use-id.mjs 9:12-23
export 'useId' (imported as 'React') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)
 @ ./node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs 3:0-47 37:11-16
 @ ./node_modules/framer-motion/dist/es/index.mjs 30:0-90 30:0-90 30:0-90
 @ ./src/components/core/Growl.jsx 8:0-56 130:35-50 132:55-64
 @ ./src/index.js 12:0-53 68:39-49

ERROR in ./node_modules/framer-motion/dist/es/utils/use-id.mjs 9:26-37
export 'useId' (imported as 'React') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)
 @ ./node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs 3:0-47 37:11-16
 @ ./node_modules/framer-motion/dist/es/index.mjs 30:0-90 30:0-90 30:0-90
 @ ./src/components/core/Growl.jsx 8:0-56 130:35-50 132:55-64
 @ ./src/index.js 12:0-53 68:39-49

webpack 5.68.0 compiled with 2 errors in 3118 ms
No issues found.
ghost commented 2 years ago

The solution for us was:

joonamakinen commented 2 years ago

Same here for both problem and solution, cheers! Next.js with it's webpack build pre-downgrade:

info  - Creating an optimized production build  
Failed to compile.

./node_modules/.pnpm/framer-motion@6.2.5_react-dom@17.0.2+react@17.0.2/node_modules/framer-motion/dist/es/utils/use-id.mjs
Attempted import error: 'useId' is not exported from 'react' (imported as 'React').

Import trace for requested module:
./node_modules/.pnpm/framer-motion@6.2.5_react-dom@17.0.2+react@17.0.2/node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs
./node_modules/.pnpm/framer-motion@6.2.5_react-dom@17.0.2+react@17.0.2/node_modules/framer-motion/dist/es/index.mjs
./src/pages/_app.tsx

./node_modules/.pnpm/framer-motion@6.2.5_react-dom@17.0.2+react@17.0.2/node_modules/framer-motion/dist/es/utils/use-id.mjs
Attempted import error: 'useId' is not exported from 'react' (imported as 'React').

Import trace for requested module:
./node_modules/.pnpm/framer-motion@6.2.5_react-dom@17.0.2+react@17.0.2/node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs
./node_modules/.pnpm/framer-motion@6.2.5_react-dom@17.0.2+react@17.0.2/node_modules/framer-motion/dist/es/index.mjs
./src/pages/_app.tsx

> Build failed because of webpack errors
 ELIFECYCLE  Command failed with exit code 1.

Similar issue at Material UI: https://github.com/mui/material-ui/issues/29860

gurkerl83 commented 2 years ago

No problems here running 6.2.5 locally. The deployment seems also ok with Next / Vercel. The useId function is not from React but an internal version of framer-motion added in the commit mentioned above.

Update: Please ignore this comment.

Chaoste commented 1 year ago

In my application, I still use React v17 which breaks due to this module using React.useId from v18. The error looks like this:

Error: Error: Uncaught [TypeError: React.useId is not a function]
    at reportException (/home/circleci/project/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
    at innerInvokeEventListeners (/home/circleci/project/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)

If this module requires v18, it should be defined as peerDependencies (if I understand peer deps correctly).

master-tecs commented 1 year ago

I am trying to use "framer-motion" in a project but my React code failed to compile; please how can I fix it?

These are the errors I'm getting.

Failed to compile.

Attempted import error: 'useId' is not exported from 'react' (imported as 'useId'). ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs 33:13-18 export 'useId' (imported as 'useId') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs 50:2-20 export 'useInsertionEffect' (imported as 'useInsertionEffect') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs 17:13-18 export 'useId' (imported as 'useId') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs 38:13-18 export 'useId' (imported as 'useId') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

webpack compiled with 4 errors

annaozola commented 1 year ago

I am trying to use "framer-motion" in a project but my React code failed to compile; please how can I fix it?

These are the errors I'm getting.

Failed to compile.

Attempted import error: 'useId' is not exported from 'react' (imported as 'useId'). ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs 33:13-18 export 'useId' (imported as 'useId') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs 50:2-20 export 'useInsertionEffect' (imported as 'useInsertionEffect') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs 17:13-18 export 'useId' (imported as 'useId') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs 38:13-18 export 'useId' (imported as 'useId') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

webpack compiled with 4 errors

I am also having this problem when running this code on newest Framer Motion version. When I'll find a fix, I'll tell you.

EDIT: Fixed it! Test this solution that worked for me. It's actually quite easy and hilarious. If you look at Framer Motion update guides you can see that Framer Motion v7 makes React 18 the minimum supported version. I'm using React 17.0.2 which explains the errors when trying to use a Framer Motion v7. All you have to do is uninstall the current Framer Motion package you have installed and install an older package.

Checking which v6 version to use npm view framer-motion versions

Installing the latest Framer Motion v6 package. I use --legacy-peer-deps as I have NPM v8 and have noticed it causes some issues without it. npm i framer-motion@6.5.1 --legacy-peer-deps

sheriffadeiza commented 1 year ago

Compiled with problems:X

ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs 40:13-18

export 'useId' (imported as 'useId') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs 58:2-20

export 'useInsertionEffect' (imported as 'useInsertionEffect') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs 18:13-18

export 'useId' (imported as 'useId') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs 37:13-18

export 'useId' (imported as 'useId') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs 34:2-20

export 'useInsertionEffect' (imported as 'useInsertionEffect') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/framer-motion/dist/es/utils/use-motion-value-event.mjs 10:2-20

export 'useInsertionEffect' (imported as 'useInsertionEffect') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/framer-motion/dist/es/value/use-spring.mjs 41:2-20

export 'useInsertionEffect' (imported as 'useInsertionEffect') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

am facing this erroe

matheusdamiao commented 1 year ago

I had the same problem. @annaozola solution fixed it perfectly. Thanks!

tourecodeur commented 11 months ago

@annaozola your solution works wonderfully for me, thank you!

Coderamrin commented 6 months ago

I was using react17 upgrading to 18 fixed the issue for me.