Next JS - 使用framer-motion时出现语法错误

Question

我正在使用 NextJS 版本 12.0.3 和动画帧器运动。将framer-motion库的功能放在一边，当我在组件中标记任何html元素时，我收到错误

error - SyntaxError: The requested module 'react' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'react';
const { createContext } = pkg;

导致错误的文件（Login.jsx）：

import { motion } from "framer-motion";

const Login: React.FC = () => {
  return (
    <motion.div
      className=""
    >
    </motion.div>
  );
};

export default Login;

奇怪的是，当我从另一个页面路由到徽标页面时，该页面加载正常。但是当我刷新页面时，我遇到了这个错误。当我保留成帧器运动的导入语句时，但删除该运动。我的 div 元素上的标签，当我刷新时错误不会持续存在。

这是 Next JS 12.0.3 的常见问题吗？我应该回滚到以前的版本吗？

谢谢你的时间！！

Answer 1

我通过导入成帧器运动也遇到了同样的错误。我通过要求更改导入解决了这个问题：

const { 运动 } = require("framer-motion");