Any way to use framer-motion?

Get Help and Help Others
1

Hello, I’ve wondered if there is any way to use framer-motion package with RedwoodJS?
If I try to add it with

yarn workspace web add framer-motion

and then import it inside any component, I get these errors

Compiled with problems:
ERROR in ../node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs 29:15-20
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 46:4-22
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 9:15-20
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 34:15-20
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 31:4-22
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:4-22
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 38:4-22
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)

So I wonder if it is even possible to use this package and if so, how?

2

Hey @AnanasCharles, you’re probably using a version of framer-motion that supports React 18. While React 18 support is on the horizon (the v5 release candidate is nearly ready and features React 18), it’s not in latest yet. If you want to use framer motion right now you need to use a version (maybe 7 or 8?) that works with React 17. Or you can upgrade your @redwoodjs packages to their canary versions (yarn rw upgrade -t canary), but just know that the canary release line is considered unstable, though we try to keep it as stable as possible.

3

Oh, thanks for the tip :slight_smile:
Solved it with installing framer-motion@6.5.1

1 Like