javascriptreactjsupgradeyarnpkgframer-motion

ERROR in ./node_modules/framer-motion/dist/es... export 'useId' (imported as 'useId') was not found in 'react' & 'useInsertionEffect'

I installed framer-motion lib using yarn add framer-motion.

The config I am having :
enter image description here

Error message :

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)
 @ ./node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs 5:0-42 57:35-43
 @ ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs 5:0-52 102:103-116 160:45-58 177:66-79
 @ ./node_modules/framer-motion/dist/es/index.mjs 3:0-73 3:0-73
 @ ./src/Components/Intro/Intro.jsx 20:0-39 155:37-47
 @ ./src/App.js 8:0-45 35:35-40
 @ ./src/index.js 6:0-24 10:33-36

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)
 @ ./node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs 5:0-42 57:35-43
 @ ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs 5:0-52 102:103-116 160:45-58 177:66-79
 @ ./node_modules/framer-motion/dist/es/index.mjs 3:0-73 3:0-73
 @ ./src/Components/Intro/Intro.jsx 20:0-39 155:37-47
 @ ./src/App.js 8:0-45 35:35-40
 @ ./src/index.js 6:0-24 10:33-36

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)
 @ ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs 5:0-52 102:103-116 160:45-58 177:66-79
 @ ./node_modules/framer-motion/dist/es/index.mjs 3:0-73 3:0-73
 @ ./src/Components/Intro/Intro.jsx 20:0-39 155:37-47
 @ ./src/App.js 8:0-45 35:35-40
 @ ./src/index.js 6:0-24 10:33-36

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)
 @ ./node_modules/framer-motion/dist/es/index.mjs 31:0-90 31:0-90 31:0-90
 @ ./src/Components/Intro/Intro.jsx 20:0-39 155:37-47
 @ ./src/App.js 8:0-45 35:35-40
 @ ./src/index.js 6:0-24 10:33-36

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_YOOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, usMeMemo, useReducer, useRef, useState, version)
 @ ./node_modules/framer-motion/dist/es/motion/index.mjs 5:0-66 57:30-46
 @ ./node_modules/framer-motion/dist/es/index.mjs 35:0-59 35:0-59
 @ ./src/Components/Intro/Intro.jsx 20:0-39 155:37-47
 @ ./src/App.js 8:0-45 35:35-40
 @ ./src/index.js 6:0-24 10:33-36

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_YOOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, usMeMemo, useReducer, useRef, useState, version)
 @ ./node_modules/framer-motion/dist/es/index.mjs 21:0-73 21:0-73
 @ ./src/Components/Intro/Intro.jsx 20:0-39 155:37-47
 @ ./src/App.js 8:0-45 35:35-40
 @ ./src/index.js 6:0-24 10:33-36

ERROR in ./node_modules/framer-motion/dist/es/value/use-spring.mjs 43: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_YOOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, usMeMemo, useReducer, useRef, useState, version)
 @ ./node_modules/framer-motion/dist/es/index.mjs 14:0-51 14:0-51
 @ ./src/Components/Intro/Intro.jsx 20:0-39 155:37-47
 @ ./src/App.js 8:0-45 35:35-40
 @ ./src/index.js 6:0-24 10:33-36

webpack 5.70.0 compiled with 7 errors in 2804 ms

Installation process was quite smooth, didnt encounter any issue in it.
Got some other solutions here, though error is not getting resolved.

Solution

  • Information :
    According to the shared configuration, the latest version of the framer-motion lib is installed.
    Sometimes we encounter compatibility issues with the version of React and with the framer-motion version that we are using.

    Solution :
    Use yarn upgrade framer-motion@version_number command (example: yarn upgrade framer-motion@4.1.2)in order to downgrade the version of framer-motion