未捕获的错误：模块构建失败（来自./node_modules/babel-loader/lib/index.js）

Question

I have read through a ton of posts on this and cannot find a solution. I built the app with Create-React-App so I didn't have to think about Babel/WebPack. I recently upgraded my dependencies and ran into this issue. The error is fairly lengthy, but here is the first part of bundle.js error...

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')

The app is React on the fron end and.Net Core on the back end. I start the SPA from startup.cs with...

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

I have tried:

• running babel-upgrade with npx
• Adding babel.config.json with

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

• Adding dev dependencies of

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

None of the above fixed the error. I even closed and restarted VS Code just in case. Any thoughts on how to fix would be appreciated.

Answer 1

I figured out the issue I was facing. While the error displayed pointed me towards Babel, which is what I thought, the real issue was related to changes to React routing.

I had to wrap all my <route> elements in a <Routes> tag. I then had to change the component attribute to element and place the component in html-like syntax...from {Home} to {<Home/>} .

One other change was that my import was pulling from react-router. I changed it to react-router-dom.

This was all in my App.js.

Here are a couple of links that might be helpful to others who, like me, did not realize there was a change.

• 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

This is caused by @jridgewell/trace-mapping - a dependency of @babel/core, You can update it to fix the problem. Reference link： [Bug]: Breaks react-router-dom #14229

Answer 3

This error comes when you install the latest version of npm like this npm install react-router-dom@6 after running npm start it will fail to compile because of @babel/core is incompatible with the npm version so you have to revert back to babel previous versions run this:

npm i -D @babel/core@7.16.12

the stop your development server and restart again