Webpack "Unexpected token export" 尝试使用 "framer-motion" 模块时

Question

我正在使用 NextJS，直到现在我都没有遇到任何问题。在我安装了“framer-motion”模块来为我的一些组件设置动画后，每当我尝试访问包含 import 语句的页面时：

import { motion } from "framer-motion"

NextJS 而不是渲染页面抛出错误：

并向我展示了代码片段：

Unexpected token 'export'

Source

external%20%22framer-motion%22 (1:0) @ eval

> 1 | module.exports = require("framer-motion");

如果我进入终端，这是我得到的错误：

export { MotionConfig, MotionConfigContext } from './context/MotionConfigContext.js';
^^^^^^

SyntaxError: Unexpected token 'export'

如果我取出 import 语句，它会按预期呈现页面

我无意中注意到的另一件事是，如果我在第一次呈现页面之前不包含 import 语句，那么在它呈现后我包含它，NextJS 将热重新加载页面，当这种情况发生时import 语句没有引起任何问题，我可以为我的组件设置动画。动画也有效。所以我想我必须用 Webpack 或 Babel 配置一些东西？我从未使用过 Babel 或 Webpack，所以我不知道

如有任何帮助，我们将不胜感激！提前致谢！

Answer 1

好吧，这对我有用：

import { motion } from 'framer-motion/dist/framer-motion'

我不明白为什么，如果有人能告诉我，那就太好了！

Webpack "Unexpected token export" 尝试使用 "framer-motion" 模块时

Webpack "Unexpected token export" when trying to use the "framer-motion" module

javascript

ecmascript-6

webpack

babeljs

next.js