Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js)

Question

我已经阅读了大量关于此的帖子，但找不到解决方案。我使用 Create-React-App 构建了该应用程序，因此我不必考虑 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",

上面的

None 修复了错误。为了以防万一，我什至关闭并重新启动了 VS Code。任何有关如何修复的想法都将不胜感激。

Answer 1

我弄清楚了我面临的问题。虽然显示的错误将我指向 Babel，这正是我的想法，但真正的问题与 React 路由的更改有关。

我不得不将所有 <route> 元素包装在 <Routes> 标签中。然后我不得不将组件属性更改为元素并将组件置于 html-like 语法中......从 {Home} 到 {<Home/>}.

另一个变化是我的导入是从 react-router 中提取的。我改成了react-router-dom.

这一切都在我的 App.js.

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

Answer 2

这是由 @jridgewell/trace-mapping - @[=14= 的依赖项] 引起的，您可以更新它来解决问题。参考link： [Bug]: Breaks react-router-dom #14229

Answer 3

像这样安装最新版本的npm时会出现这个错误 npm 安装 react-router-dom@6 运行ning npm start 后编译失败，因为@babel/core 与 npm 版本不兼容所以你必须恢复到以前的 babel 版本运行这个：

npm i -D @babel/core@7.16.12

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

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js)

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js)

javascript

node.js

reactjs

webpack

babeljs