未捕获错误:模块构建失败(来自./node_modules/babel-loader/lib/index.js)

Question

我已经读了很多关于这方面的文章，但找不到解决方案。我用Create React应用程序构建了这个应用程序，所以我不必考虑Babel/WebPack。我最近升级了依赖项，遇到了这个问题。这个错误相当长，但这里是bundle.js错误的第一部分。。。

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: .../src/StudentDashboard/ClientApp/node_modules/history/index.js: Cannot read properties of undefined (reading 'originalPositionFor')

这个应用程序是React在前端和。后端的Net Core。我从startup.cs开始SPA。。。

if (env.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
}

我试过：

• 使用npx运行babel升级
• 使用添加babel.config.json

"presets": ["@babel/preset-env", "@babel/preset-react"]

• 添加的开发依赖项

"@babel/core": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.3",

上述操作均未修复错误。为了以防万一，我甚至关闭并重新启动了VS Code。任何关于如何修复的想法都将不胜感激。

Answer 1

我发现了我面临的问题。虽然显示的错误让我想到了Babel，但真正的问题与React路由的更改有关。

我必须将所有的<route>元素封装在一个<Routes>标签中。然后，我不得不将组件属性更改为element，并将组件放置在类似html的语法中。。。从CCD_ 3到CCD_。

另一个变化是，我的导入是从react路由器中提取的。我把它改成反应路由器dom。

这都在我的App.js.中

这里有几个链接可能对其他像我一样没有意识到有变化的人有所帮助。

• https://dev.to/gabrlcj/react-router-v6-some-of-the-new-changes-181m

• https://www.c-sharpcorner.com/article/react-router-v6-what-changed-and-upgrading-guide/

Answer 2

当您像这样安装最新版本的npm时，会出现此错误npm安装react-router-dom@6运行npm启动后，由于@babel/core与npm版本不兼容，它将无法编译所以你必须恢复到babel以前的版本运行此：

npm i-D@babel/core@7.16.12

停止您的开发服务器并重新启动

Answer 3

这是由@babel/core的依赖@jridgewell/trace-mapping引起的，您可以更新它来解决问题。参考链接：〔Bug〕：打破反应路由器dom#14229

Answer 4

我的解决方案是删除node_modules，重新安装yarn