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

【问题标题】：Next JS - SyntaxError when using framer-motionNext JS - 使用 framer-motion 时出现语法错误
【发布时间】：2021-12-24 06:31:06
【问题描述】：

我正在使用 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;

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

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

感谢您的宝贵时间！！

【问题讨论】：

标签： reactjs typescript syntax next.js framer-motion

【解决方案1】：

我在导入 framer-motion 时遇到了同样的错误。我通过 require 解决了这个问题更改导入：

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

【讨论】：