Hi I am a beginner getting started with React Router, and generated the basic sources with create-react-app.
When I tried to setup the router according to the tutorial I get a TypeError. I attempted to reduce any excess code that may cause the problem until I ended up with just this
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Router } from 'react-router';
ReactDOM.render(
<Router>
</Router>,
document.getElementById('root')
);
Yet I am still getting the same error
ERROR in ./node_modules/history/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Users/Nanashi/reactjs/learning-my-blog/node_modules/history/index.js: Cannot read properties of undefined (reading 'originalPositionFor')
at SourceMapTree.originalPositionFor (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@ampproject/remapping/dist/remapping.umd.js:159:27)
at trace (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@ampproject/remapping/dist/remapping.umd.js:102:37)
at EncodedSourceMapImpl.map (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.umd.js:347:36)
at TraceMap.map (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.umd.js:430:31)
at SourceMapTree.traceMappings (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@ampproject/remapping/dist/remapping.umd.js:85:34)
at remapping (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@ampproject/remapping/dist/remapping.umd.js:258:36)
at mergeSourceMap (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@babel/core/lib/transformation/file/merge-map.js:19:30)
at generateCode (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@babel/core/lib/transformation/file/generate.js:72:39)
at run (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@babel/core/lib/transformation/index.js:55:33)
at run.next (<anonymous>)
@ ./node_modules/react-router/index.js 12:0-65 96:25-44 182:21-31 195:19-28 516:62-71 620:51-60 893:31-40 917:39-48 962:74-83
@ ./src/index.js 8:0-38 10:38-44
webpack 5.68.0 compiled with 1 error in 2579 ms
Using version 6.2.1
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0"
I am completely baffled, any help is appreciated.
I think I found the problem. It appears that babel/core@7.17.0 had a breaking change that caused this issue (https://github.com/aws-amplify/amplify-ui/issues/1242). I used the solution from this comment https://github.com/aws-amplify/amplify-ui/issues/1242#issuecomment-1028471472, set my dependency to babel/core@17.16.12 and the error went away
You can use this
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);It seems like somebody made a mistake in the last version of react router dom. It's a bug that you can fix typing this in the console:
npm i -D @babel/core@7.16.12
Then follow any example in the documentation and you should be fine.
There was an issue inside of @jridgewell/trace-mapping package.
The issue is already fixed and new version v0.2.3 was published.
If you are using npm7+ all you need to do is run npm update and you should be fine.
I fixed this problem with 2 comments
npm uninstall react-router-dom
npm i react-router-dom@5.2.0
On the bash :
npm uninstall react-router-dom
npm i react-router-dom@6.0.2
My file package.json :
"react-router-dom": "^6.0.2"
My file app.js :
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
import Home from "./pages/Home";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home/>} />
</Routes>
</Router>
);
}
export default App;
it works for me !