使用成帧器运动的motion.div时，给出元素类型的Nextjs无效错误

问题描述

当我将任何组件包装在Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.中时，我似乎无法弄清楚为什么出现此<motion.div>错误

在我的_app.js中，我有以下内容

import "../styles/index.css";
import Head from "next/head";
import {AnimatePresence} from 'framer-motion'
import {useRouterHook} from '../utils/useRouter'

function MyApp({ Component,pageProps }) {
  const {route} = useRouterHook()
  
  return (
    <>
    
      <Head>
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="true"
        />
        <link
          rel="preload"
          as="style"
          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
        />

        <link
          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
          rel="stylesheet"
        />

      </Head>
      <AnimatePresence exitBeforeEnter key={route}>
      <Component {...pageProps}  />
      </AnimatePresence>
    </>
  );
}

export default MyApp;

然后我有一个LandingPage组件，如下所示

import Link from "../utils/Link";
import paths from "../utils/paths";
import { motion } from "framer-motion";

const LandingPage = () => {
  return (
    <div>
      <img src="/logo.svg" />
      <p>?</p>
      <Link
        to={paths.register}
        
      >
Register
      </Link>
    </div>
  );
};

export default LandingPage;

我在Index.js中称呼此页面，同时用<motion.div>将其包裹起来却没有运气。

import LandingPage from '../components/LandingPage'
import Head from '../utils/head'
import {motion} from 'framer-motion'

const IndexPage = () => {

  return (
    
    
      <motion.div  animate={{ rotate: 360 }}
    transition={{ duration: 2 }}>
      <LandingPage />
      </motion.div>
      
      
  );
}

export default IndexPage

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

framer-motion reactjs reactjs