在尝试使用"framer-motion“模块时，Webpack使用了”意外标记导出“。

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语句，它就会按照预期呈现页面

我偶然注意到的另一件事是，如果我在第一次呈现页面之前没有包含导入语句，那么在它呈现我包含它之后，NextJS将热重新加载页面，当发生这种情况时，导入语句不会引起任何问题，我可以动画我的组件。动画也起作用了。所以我假设我必须用Webpack或巴别塔来配置一些东西？我既没用过巴别塔也没用过Webpack，所以我不知道

任何帮助都将不胜感激！提前谢谢你！

Answer 1

好吧，这对我来说很有效：

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

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