Home > Net >  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)

Time:02-04

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.

CodePudding user response:

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.

CodePudding user response:

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

  •  Tags:  
  • Related