Next.js应用中使用framer-motion的AnimatePresence引发服务器错误的原因与解决

问题描述 #

在Next.js应用中添加页面转场动画时，导入并使用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)

涉及代码（_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;

解决方案 #

• 修正组件名称拼写错误：代码中把AnimatePresence误写为AnimatePersence（缺少字母s），导致导入的组件为undefined，直接触发服务器错误。修正后的代码片段：

  // 导入语句修正
  import { AnimatePresence } from 'framer-motion';
  
  // 使用时同步修正
  <AnimatePresence exitBeforeEnter initial={true}>
    <Component {...pageProps} key={router.route} />
  </AnimatePresence>
  

• 确认依赖安装：如果修正拼写后问题仍存在，执行命令确保framer-motion已正确安装：

  npm install framer-motion
  # 或使用yarn
  yarn add framer-motion
  

• 版本兼容性检查：确保Next.js版本与framer-motion版本兼容，避免因版本不匹配导致组件导出异常。

内容的提问来源于stack exchange，提问作者Rohit Jambhulkar