尝试使用“framer-motion”模块时的Webpack“意外令牌导出”

Question

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

import { motion } from "framer-motion"

NextJS 不渲染页面会抛出错误：

并向我展示代码 sn-p：

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 或 Babel 配置一些东西？ 我从未使用过 Babel 或 Webpack，所以我不知道

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

Answer 1

嗯，这对我有用：

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

我不明白为什么，如果有人能填补我的空缺，那就太好了！