在 React 中导入 Framer Motion v5 时出错（使用 create-react-app）

Posted 2023-02-18

【中文标题】在 React 中导入 Framer Motion v5 时出错（使用 create-react-app）

【英文标题】：Error importing Framer Motion v5 in React (with create-react-app)

【发布时间】：2021-12-14 13:22:24

【问题描述】：

当我尝试使用成帧器动作为 div 做简单的动画时。在浏览器中出现以下错误

/node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs

Can't import the named export 'Children' from non EcmaScript module (only default export is available)```

【问题讨论】：

升级到最新版本的成帧器运动时面临同样的问题。这可能是与发布相关的错误。目前通过降级 framer-motion 版本解决了这个问题，直到下一个版本到来。只需在 package.json 中添加 "framer-motion": "^4.1.17" 并运行 npm install。

谢谢，成功了。

非常感谢...它成功了。！！！ @Waleed Tariq

【参考方案1】：

这对我有用。

npm uninstall framer-motion
npm install framer-motion@4.1.17

【讨论】：

点击诱饵文章。

【参考方案2】：

这对我有用： 从 'framer-motion/dist/framer-motion' 导入 AnimatePresence, motion

【参考方案3】：

解决无法从非 EcmaScript 模块导入命名导出 'Children'（只有默认导出可用）错误您只需将 Framer 运动版本降级到“4.1. 17” 现在，你的错误必须得到解决。

https://exerror.com/cant-import-the-named-export-children-from-non-ecmascript-module-only-default-export-is-available/

npm i framer-motion@4.1.17

【参考方案4】：

我将 Framer 运动版本降级为“4.1.17”，它对我有用。

【讨论】：

你是怎么做到的，请解释一下

更改 package.json 文件并运行 npm install。

【参考方案5】：

使用此导入解决 import motion from 'framer-motion/dist/es/index'

【参考方案6】：

这是Framer Discord对该问题的回复

关于当前版本的 create-react-app (CRA) 的问题 该问题正在 GitHub 上进行跟踪：https://github.com/formatjs/formatjs/issues/1395

经过一番测试，问题似乎在于 CRA 如何处理 ESM 依赖项，尤其是传递依赖项似乎没有得到正确处理。 CRA 还有一个关于这个https://github.com/facebook/create-react-app/issues/10356 的悬而未决的问题。

选项：

这是固定的/不会在您今天可以尝试的下一版本 CRA 中中断 (https://github.com/facebook/create-react-app/discussions/11278) 请注意，尽管它仍处于 alpha 阶段。

您可以修补 CRA 以解决该问题，如其他库的许多票证中所述

https://github.com/formatjs/formatjs/issues/1395#issuecomment-518823361 https://github.com/reactioncommerce/reaction-component-library/issues/399#issuecomment-467860022