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

Question

当我尝试使用成帧器运动为 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)```

Answer 1

这是 Framer Discord

对问题的回复

regarding the issue with the current version of create-react-app (CRA) the issue is being tracked on GitHub here: https://github.com/formatjs/formatjs/issues/1395

After testing a bit it seems that the issue is with how CRA handles ESM dependancies and more particularly transitive dependancies are not handled correctly it seems. There is also an outstanding issue with CRA about this https://github.com/facebook/create-react-app/issues/10356.

Options:

This is fixed/doesn't break in the next version of CRA which you can try today (https://github.com/facebook/create-react-app/discussions/11278) take note though its still in alpha.

You can patch CRA to get around the issue as described in a number of tickets from other libraries

https://github.com/formatjs/formatjs/issues/1395#issuecomment-518823361

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

Answer 2

使用此导入解决：

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

Answer 3

我通过更改 package.json 文件和运行 npm install 将 Framer motion 版本降级为“4.1.17”，它适用于我。

Answer 4

解决Can't import the named export 'Children' from non EcmaScript module (only default export is available) Error You Just need to Downgrade Framer motion version to “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

Answer 5

这对我有用。

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

Answer 6

这对我有用：

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

Answer 7

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

在这种情况下，只需稍微更改导入即可：

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

Answer 8

附加信息：

对于在应用上述解决方案后遇到 Could not find a declaration file for module '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"更改为您在APP中导入的路径。
保存 .d.ts 文件，类型应该不会再困扰您了。

Answer 9

我运行遇到了 Storybook 的类似问题。我通过研究 a similar error in a Gatsby app:

找到了线索

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',
        },
      ],
    },
  })
}

故事书 uses a slightly different format for its configuration，所以我不得不将其添加到 .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;
  }
}

我想你明白了——将上面的 rule 添加到 webpack 配置中，以便它正确处理 *.mjs 个文件

Answer 10

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

像这样导入为我解决了问题

Answer 11

对这里介绍的不同解决方案有点困惑。我已经从头到尾阅读了这篇文章，但没有 well-defined 解决此问题的最终解决方案。它要么降级成帧器的版本，要么更改导入声明。我最初不得不降级，但担心更高版本的更新功能。然后，我考虑了进口报关方案。但是，我必须首先回顾是什么引发了我的问题。尽管我已经开始使用 framer motion，但我正在尝试使用 React-scroll。安装 React-scroll 后，配置可能变得混乱。这就是我开始寻找解决方案的关键。所以我不得不做出选择，因为他们决定不一起工作 - 放弃 React-scroll 以继续 Framer 运动。这解决了我的问题。

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

Error importing Framer Motion v5 in React (with create-react-app)

reactjs

motion

framer-motion