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 in the terminal.
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
package.json
{
"name": "code",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"framer-motion": "^8.0.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "^5.0.1",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"node-sass": "^8.0.0"
}
}
I don't know where the error is coming from. I have searched and couldn't find a solution that works for me. I tried importing motion from framer-motion/dist/framer-motion and others but didn't work.
import {motion,AnimatePresence,AnimateSharedLayout} from "framer-motion/dist/framer-motion"
import {motion,AnimatePresence,AnimateSharedLayout} from 'framer-motion/dist/es/index'
import {motion,AnimatePresence,AnimateSharedLayout} from 'framer-motion/dist/es/index'
App.js
import { useEffect, useState } from "react";
import {
motion,
AnimatePresence,
AnimateSharedLayout,
} from "framer-motion/dist/framer-motion";
// import { motion, AnimatePresence, AnimateSharedLayout } from "framer-motion";
import "./sass/main.scss";
// Components
import Header from "./components/Header";
import Banner from "./components/Banner";
import Loader from "./components/Loader";
function App() {
const [loading, setLoading] = useState(true);
useEffect(() => {
loading
? document.querySelector("body").classList.add("loading")
: document.querySelector("body").classList.remove("loading");
}, [loading]);
return (
<AnimateSharedLayout type="crossfade">
<AnimatePresence>
{loading ? (
<motion.div key="loader">
<Loader setLoading={setLoading} />
</motion.div>
) : (
<>
<Header />
<Banner />
{!loading && (
<div className="transition-image final">
<motion.img
layoutId="main-image-1"
transition={{
ease: [0.6, 0.001, -0.05, 0.95],
duration: 1.6,
}}
src={process.env.PUBLIC_URL + `/images/image-2.jpg`}
/>
</div>
)}
</>
)}
</AnimatePresence>
</AnimateSharedLayout>
);
}
export default Ap /p;
Loader.js
import React from "react";
import { motion } from "framer-motion/dist/framer-motion";
// import { motion } from "framer-motion";
import Image from "./Image";
// Variants
const container = {
show: {
transition: {
staggerChildren: 0.35,
},
},
};
const item = {
hidden: {
opacity: 0,
y: 200,
},
show: {
opacity: 1,
y: 0,
transition: {
ease: [0.6, 0.001, -0.05, 0.95],
duration: 1.6,
},
},
exit: {
opacity: 0,
y: -200,
transition: {
ease: "easeInOut",
duration: 0.8,
},
},
};
const itemMain = {
hidden: { opacity: 0, y: 200 },
show: {
opacity: 1,
y: 0,
transition: {
ease: [0.6, 0.001, -0.05, 0.95],
duration: 1.6,
},
},
};
const Loader = ({ setLoading }) => {
return (
<div className="loader">
<motion.div
className="loader-inner"
variants={container}
initial="hidden"
animate="show"
exit="exit"
onAnimationComplete={() => setLoading(false)}
>
<ImageBlock variants={item} id="image-1" />
<motion.div className="transition-image" variants={itemMain}>
<motion.img
src={process.env.PUBLIC_URL + `/images/image-2.jpg`}
alt="random alt"
layoutId="main-image-1"
/>
</motion.div>
<ImageBlock variants={item} id="image-3" />
<ImageBlock variants={item} id="image-4" />
<ImageBlock variants={item} id="image-5" />
</motion.div>
</div>
);
};
export const ImageBlock = ({ id, variants }) => {
return (
<motion.div className={`image-block ${id}`} variants={variants}>
<Image
src={process.env.PUBLIC_URL + `/images/${id}.webp`}
fallback={process.env.PUBLIC_URL + `/images/${id}.jpg`}
alt={id}
/>
</motion.div>
);
};
export default Loader;
