logo标签列表

在使用create-react-app创建React项目时，导入Framer Motion v5出现错误。

reactjsmotionframer-motion
36

当我尝试使用Framer Motion对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)```
7
升级到最新版本的 Framer Motion 时遇到相同的问题。可能是与发布相关的错误。目前通过降级 Framer Motion 版本来解决该问题，直到下一次发布。只需在 package.json 中添加 "framer-motion": "^4.1.17"，然后运行 npm install 即可。 - Waleed Tariq
19个回答
29

我通过修改 package.json 文件并运行 npm install 命令，将 Framer motion 版本降级到“4.1.17”，这样就解决了我的问题。

20

这对我起作用：

import {AnimatePresence, motion} from 'framer-motion/dist/framer-motion'
13

以下是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。

解决方案：

  1. CRA的下一个版本已经修复了此问题，您可以今天尝试（https://github.com/facebook/create-react-app/discussions/11278），请注意它仍处于alpha测试阶段。

  2. 您可以像其他库的许多票证中描述的那样打补丁来解决CRA的问题。

6

我在使用Storybook时遇到了类似的问题。通过研究Gatsby应用中类似的错误，我找到了线索:

I was able to fix this by adding gatsby-node.js at the root of my project and the following rule on the webpack:

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        },
      ],
    },
  })
}

Storybook使用略有不同的格式进行配置，因此我需要将以下内容添加到.storybook/main.js中：

module.exports = {
  ...

  webpackFinal: async (config, { configType }) => {
    // Resolve error when webpack-ing storybook:
    // Can't import the named export 'Children' from non EcmaScript module (only
    // default export is available)
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    });

    return config;
  }
}

我想你已经明白了——把上述规则添加到webpack配置中，以便它正确处理*.mjs文件。

1
非常感谢！我在使用storybook和framer-motion 6.3.15时遇到了完全相同的问题，您添加的规则解决了错误。 - Michael Koelewijn
兄弟，你简直是个神。 - EDev
6

附加信息：

对于那些在应用上述解决方案后仍然遇到“找不到模块'framer-motion / dist / framer-motion'的声明文件”错误的人，取决于您从何处导入功能，以下是使类型正常工作的技巧：

  • 在src中创建一个声明文件，例如：framer-motion.d.ts。
  • 将下面的代码添加到刚刚创建的声明文件中。
declare module "framer-motion/dist/framer-motion" {
  export * from "framer-motion";
}
  • 将路径 "framer-motion/dist/framer-motion" 更改为你在应用程序中导入的路径。
  • 保存 .d.ts 文件，类型就不会再困扰你了。
1
这是截至2022年TypeScript的正确答案。 - Ivan Sanz Carasa
1
或者，您可以添加一个webpack解析。 - Fernando Rojo
4

在我看来，降级到旧版本是最后的手段，因为你将无法使用 Framer Motion 提供的新功能。

在这种情况下应该起作用的是仅稍微更改导入：

import { motion } from 'framer-motion/dist/framer-motion'
1
这基本上已经在大约两周前的这个答案中提到了。 - Tomerikoo
3

使用以下导入解决：

import {motion} from 'framer-motion/dist/es/index'
3
2
我在使用最新版本的Framer Motion时遇到了类似的问题。我将我的React和react-scripts升级到了最新版本，这对我有用。
以下是我的依赖项。
"dependencies": {
    "framer-motion": "^7.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
},

1.删除node_modules

   rm -rf node_modules

2.安装最新版本

npm install react react-dom react-scripts framer-motion

或者

yarn install react react-dom react-scripts framer-motion

3. 导入Framer Motion

import { motion } from "framer-motion";
2

这对我起作用。

npm uninstall framer-motion
npm install framer-motion@4.1.17
我认为不应该建议降级，因为修复导入将解决此问题。 - Manasvi Sareen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接