He estado tratando de agregar animación para las transiciones de página en mi próxima aplicación. Sin embargo, cuando estoy importando y usando la etiqueta AnimatePresence, mi aplicación muestra un error de servidor.

El error solo ocurre cuando se usa AnimatePresence.

 Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack renderElement file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6043:9) renderNodeDestructiveImpl file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11) renderNodeDestructive file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14) renderNode file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12) renderHostElement file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3) renderElement file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5) renderNodeDestructiveImpl file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11) renderNodeDestructive file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14) renderNode file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12) renderChildrenArray file:///D:/New%20Portfolio%20Website/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)

A continuación se muestra el código para el archivo _app.js

 import { ChakraProvider } from "@chakra-ui/react"; import Layout from "../components/layout/main"; import Fonts from "../components/fonts"; import theme from "../lib/theme"; import {AnimatePersence} from 'framer-motion'; const Website = ({ Component, pageProps, router }) => { return ( <ChakraProvider theme={theme}> <Fonts/> <Layout router={router}> <AnimatePersence exitBeforeEnter initial={true} > <Component {...pageProps} key={router.route} /> </AnimatePersence> </Layout> </ChakraProvider> ) } export default Website;

No sé qué está causando este error, así que alguien podría ayudarme a entender por qué sucede esto y cómo puedo solucionarlo.