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.

Edit

I think I found the problem. It appears that babel/[email protected] 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/[email protected] and the error went away

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

I had the same exact issue I finally solved it...

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 uncomment out the last line

sourceMappingURL=index.js.map

and it should work! Happy coding!