Framer-motion导入中断页面下一个Js

Question

嗨，我正在尝试将框架运动导入到 Next Js 中的页面中。

import { motion } from "framer-motion"

这会破坏页面。我在终端中收到以下错误：

/Users/.../Sites/.../node_modules/framer-motion/dist/es/index.js:1
export { MotionConfig, MotionConfigContext } from './context/MotionConfigContext.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:931:16)
    at Module._compile (internal/modules/cjs/loader.js:979:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at eval (webpack-internal:///framer-motion:1:18)
    at Object.framer-motion (/Users/.../Sites/.../.next/server/pages/work.js:446:1)
    at __webpack_require__ (/Users/.../Sites/.../.next/server/pages/work.js:23:31)

我在任何地方都看不到有关此问题的任何文档。

谢谢，

Answer 1

我也遇到了同样的错误。我注意到 Framer Motion (3.10.5) 和 Next (10.0.9) 都在过去 16 小时内更新。

我运行了

npm update

，它为我修复了这个错误，但请注意，此命令会更新包中的所有内容。

如果您担心破坏性更改，请尝试仅更新两个包 Framer 和下一个 -

npm update framer-motion next

或

yarn upgrade framer-motion next

Answer 2

我有同样的问题，你只需要更新你的包。

npm update

Answer 3

这只发生在某些页面上，我现在正在使用 Nextjs 14，在我向结构中添加另一个组件之前，它工作得很好。现在，在前面的部分中，它工作正常，但不适用于我创建的新页面。

解决方案：需要输入：“使用客户端”并且这有效（更新后也：npm update）