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

[ghost]

1. Read the FAQs 👇

2. Describe the bug

Possibly related to React 18 upgrade?
986fd3f

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]

The solution for us was:

• - "framer-motion": "^6.2.4",
• + "framer-motion": "6.2.4",

[joonamakinen]

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:
mui/material-ui#29860

[gurkerl83]

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]

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]

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]

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]

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]

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

[tourecodeur]

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

[Coderamrin]

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