blocks|key|1461809|text|通过更改package.json文件并运行npm+install，我将Framer降级为"4.1.17“，它对我有效。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1461810|entityMap^0|4|C|L|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

I downgraded the Framer motion version to &quot;4.1.17&quot; by changing the <code>package.json</code> file and running <code>npm install</code> and it works for me.

blocks|key|463712|text|这对我起了作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|463713|import+{AnimatePresence,+motion}+from+'framer-motion/dist/framer-motion'|code-block|syntax|javascript|463714|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This worked for me:
<pre><code>import {AnimatePresence, motion} from 'framer-motion/dist/framer-motion'
</code></pre>

blocks|key|992238|text|下面是框架不和谐对这个问题的回应|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|992239|关于当前版本的create+(CRA)的问题，GitHub上正在跟踪这个问题：https://github.com/formatjs/formatjs/issues/1395。
经过一些测试后，问题似乎在于CRA如何处理ESM依赖关系，尤其是传递性的依赖关系似乎没有得到正确的处理。关于这个https://github.com/facebook/create-react-app/issues/10356，CRA也有一个悬而未决的问题。
选项：|blockquote|992240|这是固定的/不中断的下一个版本的CRA，您今天可以尝试(https://github.com/facebook/create-react-app/discussions/11278)注意，尽管它仍然在alpha。|ordered-list-item|992241|您可以修补CRA以解决这个问题，正如其他库的许多票证所描述的那样。|992242|https://github.com/formatjs/formatjs/issues/1395#issuecomment-518823361|unordered-list-item|992243|https://github.com/reactioncommerce/reaction-component-library/issues/399#issuecomment-467860022|992244|entityMap|0|LINK|mutability|MUTABLE|url|https://discord.com/channels/341919693348536320/716908973713784904/903246607229812746|1|https://github.com/formatjs/formatjs/issues/1395|2|https://github.com/facebook/create-react-app/issues/10356|3|https://github.com/facebook/create-react-app/discussions/11278|4|5^0|3|5|0|0|13|1C|1|41|1L|2|0|S|1Q|3|0|0|0|1Z|4|0|0|2O|5|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|F|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]|$A|1E|B|1F|1|1G]]|C|$]]|$1|G|3|H|5|I|7|1H|8|@]|9|@$A|1I|B|1J|1|1K]]|C|$]]|$1|J|3|K|5|I|7|1L|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1M|8|@]|9|@$A|1N|B|1O|1|1P]]|C|$]]|$1|O|3|P|5|N|7|1Q|8|@]|9|@$A|1R|B|1S|1|1T]]|C|$]]|$1|Q|3|-4|5|6|7|1U|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]|12|$5|T|U|V|C|$W|13]]|14|$5|T|U|V|C|$W|M]]|15|$5|T|U|V|C|$W|P]]]]

Here's the response to the issue from the <a href="https://discord.com/channels/341919693348536320/716908973713784904/903246607229812746" rel="noreferrer">Framer Discord</a>
<blockquote>
regarding the issue with the current version of create-react-app (CRA)
the issue is being tracked on GitHub here: <a href="https://github.com/formatjs/formatjs/issues/1395" rel="noreferrer">https://github.com/formatjs/formatjs/issues/1395</a>
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 <a href="https://github.com/facebook/create-react-app/issues/10356" rel="noreferrer">https://github.com/facebook/create-react-app/issues/10356</a>.
Options:
<ol>
<li>This is fixed/doesn't break in the next version of CRA which you can try today (<a href="https://github.com/facebook/create-react-app/discussions/11278" rel="noreferrer">https://github.com/facebook/create-react-app/discussions/11278</a>)
take note though its still in alpha.
</li>
<li>You can patch CRA to get around the issue as described in a number of tickets from other libraries
</li>
</ol>
<ul>
<li><a href="https://github.com/formatjs/formatjs/issues/1395#issuecomment-518823361" rel="noreferrer">https://github.com/formatjs/formatjs/issues/1395#issuecomment-518823361</a></li>
<li><a href="https://github.com/reactioncommerce/reaction-component-library/issues/399#issuecomment-467860022" rel="noreferrer">https://github.com/reactioncommerce/reaction-component-library/issues/399#issuecomment-467860022</a></li>
</ul>
</blockquote>

blocks|key|997930|text|其他信息：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|997931|对于那些在应用上述解决方案后遇到Could+not+find+a+declaration+file+for+module+'framer-motion/dist/framer-motion'.错误的人，取决于您从何处导入函数，下面是使该类型工作的诀窍：|offset|length|style|CODE|997932|在src中创建声明文件，例如framer-motion.d.ts.|unordered-list-item|997933|在刚才创建的声明文件中添加以下代码。|997934|declare+module+"framer-motion/dist/framer-motion"+{
++export+*+from+"framer-motion";
}|code-block|syntax|javascript|997935|将路径"framer-motion/dist/framer-motion"更改为在应用程序中导入的路径。|997936|保存.d.ts文件，该类型不应该再困扰您了。|997937|entityMap^0|0|G|28|0|E|J|0|0|0|3|Y|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|K|3|L|5|J|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|15|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|J|7|16|8|@$D|17|E|18|F|G]]|9|@]|A|$]]|$1|T|3|U|5|J|7|19|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|W|$]]

Additional Information:
For people who are struggling with the <code>Could not find a declaration file for module 'framer-motion/dist/framer-motion'.</code> error after applying the solutions above, depending on where you are importing the functions from, here is the trick to make the type works:
<ul>
<li>Create a declaration file in src, e.g. <code>framer-motion.d.ts.</code></li>
<li>Add the following code inside the declaration file that you just created.</li>
</ul>
<pre class="lang-js prettyprint-override"><code>declare module &quot;framer-motion/dist/framer-motion&quot; {
 export * from &quot;framer-motion&quot;;
}
</code></pre>
<ul>
<li>Change the path <code>&quot;framer-motion/dist/framer-motion&quot;</code> to the path you are importing in your APP.</li>
<li>Save the .d.ts file and the type should not be bothering you anymore.</li>
</ul>

blocks|key|997874|text|使用此导入解决：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|997875|import+{motion}+from+'framer-motion/dist/es/index'|code-block|syntax|javascript|997876|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Solved using this import:
<pre><code>import {motion} from 'framer-motion/dist/es/index'
</code></pre>

blocks|key|997895|text|在我看来，降级到老版本是最后的手段，因为你不能使用较新的功能框架运动给你。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|997896|在这种情况下，只需稍微更改一下导入就行了：|997897|import+{+motion+}+from+'framer-motion/dist/framer-motion'|code-block|syntax|javascript|997898|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In my opinion downgrading to older version is a last resort because you can't use newer features framer motion gives you.
What should work in this case is just changing import slightly:
<pre><code>import { motion } from 'framer-motion/dist/framer-motion'
</code></pre>

blocks|key|1461959|text|我遇到了一个类似的问题，故事簿。我通过研究Gatsby应用程序中类似的错误找到了一条线索|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1461960|我能够通过在我的项目的根添加gatsby-node.js和webpack的以下规则来修复这个问题：
exports.onCreateWebpackConfig+=+({+actions+})+=>+{+actions.setWebpackConfig({+actions.setWebpackConfig：{actions.setWebpackConfig：{+test:+/..mjs$/，包括:/node_actions.setWebpackConfig/，类型：'javascript/auto'，}+)+}+}|blockquote|1461961|故事书对其配置使用稍微不同的格式。，所以我不得不将它添加到.storybook/main.js中|style|CODE|1461962|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;
++}
}|code-block|syntax|javascript|1461963|我认为您有这样的想法--将上面的规则添加到webpack配置中，这样它就可以正确地处理*.mjs文件。|1461964|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/doczjs/docz/issues/1686|1|https://storybook.js.org/docs/react/configure/webpack|2|https://webpack.js.org/configuration/module/#rule^0|L|G|0|0|0|T|I|3|E|1|0|0|17|5|G|2|2|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|F|7|17|8|@]|9|@]|C|$]]|$1|G|3|H|5|6|7|18|8|@$A|19|B|1A|I|J]]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|K|3|L|5|M|7|1E|8|@]|9|@]|C|$N|O]]|$1|P|3|Q|5|6|7|1F|8|@$A|1G|B|1H|I|J]]|9|@$A|1I|B|1J|1|1K]]|C|$]]|$1|R|3|-4|5|6|7|1L|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]|Z|$5|U|V|W|C|$X|10]]|11|$5|U|V|W|C|$X|12]]]]

I ran into a similar issue with Storybook. I found a clue by researching <a href="https://github.com/doczjs/docz/issues/1686" rel="nofollow noreferrer">a similar error in a Gatsby app</a>:
<blockquote>
I was able to fix this by adding gatsby-node.js at the root of my project and the following rule on the webpack:
<pre><code>exports.onCreateWebpackConfig = ({ actions }) =&gt; {
 actions.setWebpackConfig({
 module: {
 rules: [
 {
 test: /\.mjs$/,
 include: /node_modules/,
 type: 'javascript/auto',
 },
 ],
 },
 })
}
</code></pre>
</blockquote>
Storybook <a href="https://storybook.js.org/docs/react/configure/webpack" rel="nofollow noreferrer">uses a slightly different format for its configuration</a>, so I had to add this to <code>.storybook/main.js</code>:
<pre><code>module.exports = {
 ...

 webpackFinal: async (config, { configType }) =&gt; {
 // 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: &quot;javascript/auto&quot;,
 });

 return config;
 }
}
</code></pre>
I think you get the idea — add the above <a href="https://webpack.js.org/configuration/module/#rule" rel="nofollow noreferrer">rule</a> to webpack config, so that it treats <code>*.mjs</code> files correctly

blocks|key|1461817|text|这对我有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1461818|npm+uninstall+framer-motion
npm+install+framer-motion@4.1.17|code-block|syntax|javascript|1461819|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works for me.
<pre class="lang-js prettyprint-override"><code>npm uninstall framer-motion
npm install framer-motion@4.1.17
</code></pre>

blocks|key|992323|text|import+{+motion+}+from+'framer-motion/dist/framer-motion'|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|992324|这样的进口解决了我的问题|unstyled|992325|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre class="lang-js prettyprint-override"><code>import { motion } from 'framer-motion/dist/framer-motion'
</code></pre>
importing like this solved it for me

blocks|key|463977|text|我在研究最新版本的框架议案时，亦曾面对类似的问题。我已经将我的react+react+scripts升级到了最新的版本，它适合我。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|463978|这里是我的依赖关系。|463979|"dependencies":+{
++++"framer-motion":+"%5E7.2.1",
++++"react":+"%5E18.2.0",
++++"react-dom":+"%5E18.2.0",
++++"react-scripts":+"%5E5.0.1",
},|code-block|syntax|javascript|463980|1.删除node_modules|463981|+++rm+-rf+node_modules|463982|2.安装最新的|463983|npm+install+react+react-dom+react-scripts+framer-motion|463984|或|463985|yarn+install+react+react-dom+react-scripts+framer-motion|463986|3.导入框架运动|463987|import+{+motion+}+from+"framer-motion";|463988|entityMap^0|V|5|11|D|0|0|0|0|G|0|0|0|7|0|0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|S|3|T|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1J|8|@]|D|@]|E|$]]|$1|W|3|X|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|6|7|1L|8|@$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|10|3|11|5|J|7|1O|8|@]|D|@]|E|$K|L]]|$1|12|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|13|$]]

I have faced the similar issue while working on latest version of framer motion. I have upgraded my react react-scripts to the latest version and it works for me.
Here is my dependencies.
<pre><code>&quot;dependencies&quot;: {
 &quot;framer-motion&quot;: &quot;^7.2.1&quot;,
 &quot;react&quot;: &quot;^18.2.0&quot;,
 &quot;react-dom&quot;: &quot;^18.2.0&quot;,
 &quot;react-scripts&quot;: &quot;^5.0.1&quot;,
},
</code></pre>
1.Remove node_modules
<pre><code> rm -rf node_modules
</code></pre>
2.Install latest
<pre><code>npm install react react-dom react-scripts framer-motion
</code></pre>
or
<pre><code>yarn install react react-dom react-scripts framer-motion
</code></pre>
3. import framer motion
<pre><code>import { motion } from &quot;framer-motion&quot;;
</code></pre>

blocks|key|998028|text|与这里提出的不同解决方案有点混淆。我从上到下都读过这篇文章，对于这个问题没有一个明确的最终解决方案。它要么是下调了框架议案的版本，要么是修改了进口声明。一开始我不得不降级，但我担心的是更高版本的更新功能。然后，我考虑了导入申报解决方案。然而，我必须首先回顾一下是什么引起了我的问题。我试图使用反应-滚动，虽然我已经开始使用框架运动。安装了反作用卷轴后，配置可能会失去方向。这就是我开始寻找解决办法的地方。所以我不得不做出选择，因为他们已经决定不一起工作-废弃的反应-滚动继续与Framer动议。为我解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|998029|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

A little bit of confusion with the different solutions presented here. I have read this thread from top to bottom and there isn't a well-defined ultimate solution to this issue. It is either downgrading the version of the framer motion or a change in the import declaration. I had to downgrade initially but was concerned about updated features in higher versions. Then, I considered the import declaration solution. However, I had to review what started the issue for me in the first place. I was trying to use React-scroll though I had already begun using framer motion. After installing React-scroll, the configurations probably became disoriented. That was the point I began searching for solutions. So I had to make a choice since they've decided not to work together - discarded React-scroll to continue with Framer motion. That solved the issue for me.

blocks|key|992371|text|如果您正在使用(CRA)，并且希望在最新版本上使用Framer+(我正在编写7.2.0版本)，则可以使用Craco不弹出。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|992372|安装克拉科|ordered-list-item|offset|length|992373|在一个名为craco.config.js的新文件中，添加这一行，它将调用我们将要创建的插件：|style|CODE|992374|const+{+ProvidePlugin+}+=+require("webpack");
const+webpackFramerTyperScriptPlugin+=+require("./craco-plugin-framer-typescript");
module.exports+=+{
++webpack:+{
++++plugins:+[
++++++new+ProvidePlugin({
++++++++React:+"react",
++++++}),
++++],
++},
++plugins:+[{+plugin:+webpackFramerTyperScriptPlugin+}],
};|code-block|syntax|javascript|992375|在名为craco-plugin-framer-typescript.js的文件中创建插件|992376|const+{+loaderByName,+addBeforeLoader+}+=+require("@craco/craco");
module.exports+=+{
++overrideWebpackConfig:+({+webpackConfig,+cracoConfig,+pluginOptions,+context:+{+env,+paths+}+})+=>+{
++++const+ruleToAdd+=+{
++++++test:+/\.mjs$/,
++++++include:+/node_modules/,
++++++type:+"javascript/auto",
++++};
++++addBeforeLoader(webpackConfig,+loaderByName("file-loader"),+ruleToAdd);
++++return+webpackConfig;
++},
};|992377|希望它能帮助其他想使用CRA+%2B+TypeScript+%2B最新版本的Framer的人。|992378|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/dilanx/craco^0|0|2|3|0|0|5|F|0|0|3|X|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@$E|15|F|16|1|17]]|A|$]]|$1|G|3|H|5|D|7|18|8|@$E|19|F|1A|I|J]]|9|@]|A|$]]|$1|K|3|L|5|M|7|1B|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|D|7|1C|8|@$E|1D|F|1E|I|J]]|9|@]|A|$]]|$1|R|3|S|5|M|7|1F|8|@]|9|@]|A|$N|O]]|$1|T|3|U|5|6|7|1G|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]]]

If you are using Create React App (CRA) and want to use Framer on the latest version (as I am writing version 7.2.0) you can use Craco to not eject.
<ol>
<li>Install <a href="https://github.com/dilanx/craco" rel="nofollow noreferrer">Craco</a></li>
<li>In a new file called <code>craco.config.js</code> add this line that will call a plugin that we will create:</li>
</ol>
<pre><code>const { ProvidePlugin } = require(&quot;webpack&quot;);
const webpackFramerTyperScriptPlugin = require(&quot;./craco-plugin-framer-typescript&quot;);
module.exports = {
 webpack: {
 plugins: [
 new ProvidePlugin({
 React: &quot;react&quot;,
 }),
 ],
 },
 plugins: [{ plugin: webpackFramerTyperScriptPlugin }],
};

</code></pre>
<ol start="3">
<li>Create the plugin in a file named <code>craco-plugin-framer-typescript.js</code></li>
</ol>
<pre><code>const { loaderByName, addBeforeLoader } = require(&quot;@craco/craco&quot;);
module.exports = {
 overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) =&gt; {
 const ruleToAdd = {
 test: /\.mjs$/,
 include: /node_modules/,
 type: &quot;javascript/auto&quot;,
 };
 addBeforeLoader(webpackConfig, loaderByName(&quot;file-loader&quot;), ruleToAdd);
 return webpackConfig;
 },
};
</code></pre>
Hopefully it can help someone else that want to use CRA + TypeScript + Latest version of Framer.

blocks|key|1462043|text|如果react脚本是最新的，那么这不会对您有什么帮助。运行npm卸载反应-脚本。我不得不在package.json中手动添加它们："%5E5.0.1"，检查https://www.npmjs.com/package/react-scripts的最新版本，然后在package.json运行npm+i中输入它，或者安装应该工作的版本。这是我的依赖项列表供参考。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1462044|"framer-motion":+"%5E7.6.6",
"node-sass":+"%5E8.0.0",
"react":+"%5E18.2.0",
"react-dom":+"%5E18.2.0",
"react-scripts":+"%5E5.0.1",
"react-icons":+"%5E4.6.0",
"react-tooltip":+"%5E4.5.0",
"web-vitals":+"%5E3.0.4"|code-block|syntax|javascript|1462045|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/react-scripts^0|24|17|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Check what version of react-scripts you have if react scripts are up-to-date then this wont help you . run npm uninstall react-scripts. I had to manually add them in package.json&quot;react-scripts&quot;: &quot;^5.0.1&quot;, check what is the latest version go to <a href="https://www.npmjs.com/package/react-scripts" rel="nofollow noreferrer">https://www.npmjs.com/package/react-scripts</a> then type it in the package.json run npm i or install that should work.
here is my dependencies list for reference.
<pre><code>&quot;framer-motion&quot;: &quot;^7.6.6&quot;,
&quot;node-sass&quot;: &quot;^8.0.0&quot;,
&quot;react&quot;: &quot;^18.2.0&quot;,
&quot;react-dom&quot;: &quot;^18.2.0&quot;,
&quot;react-scripts&quot;: &quot;^5.0.1&quot;,
&quot;react-icons&quot;: &quot;^4.6.0&quot;,
&quot;react-tooltip&quot;: &quot;^4.5.0&quot;,
&quot;web-vitals&quot;: &quot;^3.0.4&quot;
</code></pre>

blocks|key|998077|text|我面临着和这里类似的问题。因为我需要新的features.so，所以我没有降低框架运动的等级，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|998078|更改导入语句，|998079|import+{+motion+}+from+'framer-motion/dist/framer-motion'|code-block|syntax|javascript|998080|必须将脚本版本更改为最新版本，|998081|"dependencies":+{
++++"framer-motion":+"%5E7.2.1",
++++"react":+"%5E18.2.0",
++++"react-dom":+"%5E18.2.0",
++++"react-scripts":+"%5E5.0.1",
}|998082|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I faced the similar Issue as here. I didn't downgrade the framer motion since I need new features.so I have done,
change import statement,
<pre><code>import { motion } from 'framer-motion/dist/framer-motion'
</code></pre>
and Have to change react script version to latest,
<pre><code>&quot;dependencies&quot;: {
 &quot;framer-motion&quot;: &quot;^7.2.1&quot;,
 &quot;react&quot;: &quot;^18.2.0&quot;,
 &quot;react-dom&quot;: &quot;^18.2.0&quot;,
 &quot;react-scripts&quot;: &quot;^5.0.1&quot;,
}
</code></pre>

When am trying to do simple animation for div using framer motion. Am getting this following error in browser
/node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
<pre><code>Can't import the named export 'Children' from non EcmaScript module (only default export is available)```
</code></pre>

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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

当我试图做简单的动画为div使用框架运动。在浏览器中得到以下错误/node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjsCan't import the named export 'Children' from non EcmaScript module (only default export is avai

问在React中导入Framer v5时出错(使用创建-react app)
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在React中导入Framer v5时出错(使用创建-react app)EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在React中导入Framer v5时出错(使用创建-react app)
EN