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 piled 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 pletely baffled, any help is appreciated.
Edit
I think I found the problem. It appears that babel/[email protected] had a breaking change that caused this issue (). I used the solution from this ment , set my dependency to babel/[email protected] and the error went away
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 piled 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 pletely baffled, any help is appreciated.
Edit
I think I found the problem. It appears that babel/[email protected] had a breaking change that caused this issue (https://github./aws-amplify/amplify-ui/issues/1242). I used the solution from this ment https://github./aws-amplify/amplify-ui/issues/1242#issuement-1028471472, set my dependency to babel/[email protected] and the error went away
- Seems to be duplicate of stackoverflow./questions/70965112/… Perhaps there's an intermittent issue with npm right now as both posts are the same error and only minutes apart. – Drew Reese Commented Feb 3, 2022 at 2:58
- you are right, sorry I didn't see that post before I posted mine – Tomazulo Commented Feb 3, 2022 at 3:35
5 Answers
Reset to default 7There 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.
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/[email protected]
Then follow any example in the documentation and you should be fine.
Go to ./node_modules/history/index.js
You will see something like this:
import _extends from'@babel/runtime/helpers/esm/extends';var r,B=r||(r={});B.Pop="POP";B.Push="PUSH";B.Replace="REPLACE";var C="production"!==process.env.NODE_ENV?function(b){return Object.freeze(b)}:function(b){return b};function D(b,h){if(!b){"undefined"!==typeof console&&console.warn(h);try{throw Error(h);}catch(e){}}}function E(b){b.preventDefault();b.returnValue=""}
function F(){var b=[];return{get length(){return b.length},push:function(h){b.push(h);return function(){b=b.filter(function(e){return e!==h})}},call:function(h){b.forEach(function(e){return e&&e(h)})}}}function H(){return Math.random().toString(36).substr(2,8)}function I(b){var h=b.pathname;h=void 0===h?"/":h;var e=b.search;e=void 0===e?"":e;b=b.hash;b=void 0===b?"":b;e&&"?"!==e&&(h+="?"===e.charAt(0)?e:"?"+e);b&&"#"!==b&&(h+="#"===b.charAt(0)?b:"#"+b);return h}
function J(b){var h={};if(b){var e=b.indexOf("#");0<=e&&(h.hash=b.substr(e),b=b.substr(0,e));e=b.indexOf("?");0<=e&&(h.search=b.substr(e),b=b.substr(0,e));b&&(h.pathname=b)}return h}
function createBrowserHistory(b){function h(){var c=p.location,a=m.state||{};return[a.idx,C({pathname:c.pathname,search:c.search,hash:c.hash,state:a.usr||null,key:a.key||"default"})]}function e(c){return"string"===typeof c?c:I(c)}function x(c,a){void 0===a&&(a=null);return C(_extends({pathname:q.pathname,hash:"",search:""},"string"===typeof c?J(c):c,{state:a,key:H()}))}function z(c){t=c;c=h();v=c[0];q=c[1];d.call({action:t,location:q})}function A(c,a){function f(){A(c,a)}var l=r.Push,k=x(c,
a);if(!g.length||(g.call({action:l,location:k,retry:f}),!1)){var n=[{usr:k.state,key:k.key,idx:v+1},e(k)];k=n[0];n=n[1];try{m.pushState(k,"",n)}catch(G){p.location.assign(n)}z(l)}}function y(c,a){function f(){y(c,a)}var l=r.Replace,k=x(c,a);g.length&&(g.call({action:l,location:k,retry:f}),1)||(k=[{usr:k.state,key:k.key,idx:v},e(k)],m.replaceState(k[0],"",k[1]),z(l))}function w(c){m.go(c)}void 0===b&&(b={});b=b.window;var p=void 0===b?document.defaultView:b,m=p.history,u=null;p.addEventListener("popstate",
function(){if(u)g.call(u),u=null;else{var c=r.Pop,a=h(),f=a[0];a=a[1];if(g.length)if(null!=f){var l=v-f;l&&(u={action:c,location:a,retry:function(){w(-1*l)}},w(l))}else"production"!==process.env.NODE_ENV?D(!1,"You are trying to block a POP navigation to a location that was not created by the history library. The block will fail silently in production, but in general you should do all navigation with the history library (instead of using window.history.pushState directly) to avoid this situation."):
void 0;else z(c)}});var t=r.Pop;b=h();var v=b[0],q=b[1],d=F(),g=F();null==v&&(v=0,m.replaceState(_extends({},m.state,{idx:v}),""));return{get action(){return t},get location(){return q},createHref:e,push:A,replace:y,go:w,back:function(){w(-1)},forward:function(){w(1)},listen:function(c){return d.push(c)},block:function(c){var a=g.push(c);1===g.length&&p.addEventListener("beforeunload",E);return function(){a();g.length||p.removeEventListener("beforeunload",E)}}}};
function createHashHistory(b){function h(){var a=J(m.location.hash.substr(1)),f=a.pathname,l=a.search;a=a.hash;var k=u.state||{};return[k.idx,C({pathname:void 0===f?"/":f,search:void 0===l?"":l,hash:void 0===a?"":a,state:k.usr||null,key:k.key||"default"})]}function e(){if(t)c.call(t),t=null;else{var a=r.Pop,f=h(),l=f[0];f=f[1];if(c.length)if(null!=l){var k=q-l;k&&(t={action:a,location:f,retry:function(){p(-1*k)}},p(k))}else"production"!==process.env.NODE_ENV?D(!1,"You are trying to block a POP navigation to a location that was not created by the history library. The block will fail silently in production, but in general you should do all navigation with the history library (instead of using window.history.pushState directly) to avoid this situation."):
void 0;else A(a)}}function x(a){var f=document.querySelector("base"),l="";f&&f.getAttribute("href")&&(f=m.location.href,l=f.indexOf("#"),l=-1===l?f:f.slice(0,l));return l+"#"+("string"===typeof a?a:I(a))}function z(a,f){void 0===f&&(f=null);return C(_extends({pathname:d.pathname,hash:"",search:""},"string"===typeof a?J(a):a,{state:f,key:H()}))}function A(a){v=a;a=h();q=a[0];d=a[1];g.call({action:v,location:d})}function y(a,f){function l(){y(a,f)}var k=r.Push,n=z(a,f);"production"!==process.env.NODE_ENV?
D("/"===n.pathname.charAt(0),"Relative pathnames are not supported in hash history.push("+JSON.stringify(a)+")"):void 0;if(!c.length||(c.call({action:k,location:n,retry:l}),!1)){var G=[{usr:n.state,key:n.key,idx:q+1},x(n)];n=G[0];G=G[1];try{u.pushState(n,"",G)}catch(K){m.location.assign(G)}A(k)}}function w(a,f){function l(){w(a,f)}var k=r.Replace,n=z(a,f);"production"!==process.env.NODE_ENV?D("/"===n.pathname.charAt(0),"Relative pathnames are not supported in hash history.replace("+JSON.stringify(a)+
")"):void 0;c.length&&(c.call({action:k,location:n,retry:l}),1)||(n=[{usr:n.state,key:n.key,idx:q},x(n)],u.replaceState(n[0],"",n[1]),A(k))}function p(a){u.go(a)}void 0===b&&(b={});b=b.window;var m=void 0===b?document.defaultView:b,u=m.history,t=null;m.addEventListener("popstate",e);m.addEventListener("hashchange",function(){var a=h()[1];I(a)!==I(d)&&e()});var v=r.Pop;b=h();var q=b[0],d=b[1],g=F(),c=F();null==q&&(q=0,u.replaceState(_extends({},u.state,{idx:q}),""));return{get action(){return v},get location(){return d},
createHref:x,push:y,replace:w,go:p,back:function(){p(-1)},forward:function(){p(1)},listen:function(a){return g.push(a)},block:function(a){var f=c.push(a);1===c.length&&m.addEventListener("beforeunload",E);return function(){f();c.length||m.removeEventListener("beforeunload",E)}}}};
function createMemoryHistory(b){function h(d,g){void 0===g&&(g=null);return C(_extends({pathname:t.pathname,search:"",hash:""},"string"===typeof d?J(d):d,{state:g,key:H()}))}function e(d,g,c){return!q.length||(q.call({action:d,location:g,retry:c}),!1)}function x(d,g){u=d;t=g;v.call({action:u,location:t})}function z(d,g){var c=r.Push,a=h(d,g);"production"!==process.env.NODE_ENV?D("/"===t.pathname.charAt(0),"Relative pathnames are not supported in memory history.push("+JSON.stringify(d)+")"):
void 0;e(c,a,function(){z(d,g)})&&(m+=1,p.splice(m,p.length,a),x(c,a))}function A(d,g){var c=r.Replace,a=h(d,g);"production"!==process.env.NODE_ENV?D("/"===t.pathname.charAt(0),"Relative pathnames are not supported in memory history.replace("+JSON.stringify(d)+")"):void 0;e(c,a,function(){A(d,g)})&&(p[m]=a,x(c,a))}function y(d){var g=Math.min(Math.max(m+d,0),p.length-1),c=r.Pop,a=p[g];e(c,a,function(){y(d)})&&(m=g,x(c,a))}void 0===b&&(b={});var w=b;b=w.initialEntries;w=w.initialIndex;var p=(void 0===
b?["/"]:b).map(function(d){var g=C(_extends({pathname:"/",search:"",hash:"",state:null,key:H()},"string"===typeof d?J(d):d));"production"!==process.env.NODE_ENV?D("/"===g.pathname.charAt(0),"Relative pathnames are not supported in createMemoryHistory({ initialEntries }) (invalid entry: "+JSON.stringify(d)+")"):void 0;return g}),m=Math.min(Math.max(null==w?p.length-1:w,0),p.length-1),u=r.Pop,t=p[m],v=F(),q=F();return{get index(){return m},get action(){return u},get location(){return t},createHref:function(d){return"string"===
typeof d?d:I(d)},push:z,replace:A,go:y,back:function(){y(-1)},forward:function(){y(1)},listen:function(d){return v.push(d)},block:function(d){return q.push(d)}}};export{r as Action,createBrowserHistory,createHashHistory,createMemoryHistory,I as createPath,J as parsePath}
//# sourceMappingURL=index.js.map
Just unment out the last line
sourceMappingURL=index.js.map
I fixed this problem with 2 ments
npm uninstall react-router-dom
npm i [email protected]
On the bash :
npm uninstall react-router-dom
npm i [email protected]
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 !