Develop Reference

React Router: TypeError Cannot read properties of undefined (reading 'originalPositionFor')

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/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

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.

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.

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

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 !

How can I use bootstrap 5 Javascript in my Next JS app?

This is my first experience with Next JS and I am trying to bootstrap the Next JS app, which has been going on well until now that I have to use bootstrap's Javascript for a carousel.
So first, I added the bootstrap js to the script of the next js page (pages/gallery/[id].js) manually like this:
import Script from "next/script";
import Layout from "../../layouts/interface";
import SlidingComponent from "../../components/slide";
export default function GalleryPage() {
const router = useRouter();
const {id} = router.query;
return (
<Layout>
<SlidingComponent />
<Script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" />
</Layout>
)
}
This works initially but as soon as the second slide image comes in, next js throws the following error:
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'classList')
Call Stack
st._setActiveIndicatorElement
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js (6:13913)
st._slide
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js (6:15057)
st.next
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js (6:10814)
st.nextWhenVisible
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js (6:10883
I found another way to correct the error online. It says I should import the bootstrap js in my pages/_app.js like this:
import 'bootstrap/dist/css/bootstrap.css'
import '../styles/globals.css'
import {useEffect} from "react";
//this is what the solution says:
useEffect(() => {
import("bootstrap/dist/js/bootstrap");
}, []);
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
But this too gives me the following error:
https://nextjs.org/docs/messages/module-not-found
wait - compiling...
error - ./node_modules/bootstrap/dist/js/bootstrap.js:7:0
Module not found: Can't resolve '#popperjs/core'
Import trace for requested module:
./pages/_app.js
Now I don't even know what to do, can anybody please help me?

Use Approach 2, for the popperjs error follow these steps
npm i #popperjs/core
see here How to fix this error : " Module not found :can't resolve popper.js "

Failed to compile. Error in ./src/reportWebVitals.js. reportWebVitals.js: 'import' and 'export' may only appear at the top level (3:4)

I can not see the problem in webvital.js. I intalled react-router-dom twice and then this error ocurred and I broke my code. I found that a solution can be to start the project from cero, but that didn't work. I also installed webvitals but it is still appears the same bug. Can anyone have a clue what will be the solution? I can see properly the proyect in github but no in my pc. It is not deploying well and is not actualizing the webpage. Thank you so much for the help! :)
This is reportWebVirials.js
const reportWebVitals = (onPerfEntry) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import(`web-vitals`).then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
This is the error:
Failed to compile.
Error in ./src/reportWebVitals.js
Syntax error: D:/ELEARNING PATH/CURSADA/PROYECT/PROYECT REWARDS STORE/store-lopez-andrea/src/reportWebVitals.js: 'import' and 'export' may only appear at the top level (3:4)
1 | const reportWebVitals = (onPerfEntry) => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
> 3 | import(`web-vitals`).then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
| ^
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
# ./src/index.js 19:23-51
This is the index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import AppProvider from "./context/AppContext";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<AppProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</AppProvider>
</React.StrictMode>,
document.getElementById("root")
);

I had the same problem, I went ahead with an
npm install
then
npm audit fix --force
command. After this, I relaunched my React application and it worked!

Had the same problem and running this command fixed it, thanks to an answer in this thread.
npm install react-router-dom --save

TypeError: Cannot read property 'hash' of null

I'm running into issues deploying to Vercel after making some changes.
Running with npm run dev works but after deploying to Vercel (which runs with npm run build) it coughs up an error:
09:53:00.125 TypeError: Cannot read property 'hash' of null
09:53:00.125 at callback (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59190:46)
09:53:00.125 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:57683:39
09:53:00.125 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135587:5
09:53:00.125 at Hook.eval [as callAsync] (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:33832:10), :6:1)
09:53:00.126 at AsyncQueue._handleResult (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135557:21)
09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135540:11
09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59794:14
09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59452:6
09:53:00.126 at done (/vercel/path0/node_modules/next/dist/compiled/neo-async/async.js:1:10308)
09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59356:13
09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135587:5
09:53:00.126 at Hook.eval [as callAsync] (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:33832:10), :6:1)
09:53:00.127 at AsyncQueue._handleResult (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135557:21)
09:53:00.127 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135540:11
09:53:00.127 at Array. (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59296:4)
09:53:00.128 at runCallbacks (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:20480:15)
09:53:00.155 Error: Command "npm run build" exited with 1
Sorry if the formatting makes it hard to read, I'm not too sure how to copy over the error log without the format running.
All I changed can be boiled down to adding a Layout component which uses NavBar, and Footer components. I then modified the _app.js file to use said layout:
import React from "react";
import App from "next/app";
import "tailwindcss/tailwind.css";
import Layout from "../components/Layout";
class MyApp extends App {
render() {
const { Component, pageProps, router } = this.props;
if (router.pathname.startsWith("/shop/")) { //router path check to include/exclude Layout e.g: paths starting with /shop
return (
<Layout>
<Component {...pageProps}></Component>
</Layout>
);
}
return <Component {...pageProps}></Component>;
}
}
export default MyApp;
Any insights regarding this error is much appreciated!

Don't we import Component which is a reserved keyword from react module like below and used for extending a class
import React, { Component } from "react";
class SomeNavComponent extends Component {
Also, it looks like the issue is with the naming of a component, in my opinion
const { Component, pageProps, router } = this.props;

Didn't change anything, after pushing to Vercel again the error didn't pop up, so its "fixed" now I guess.

Unexpected token argument in render method

I'm trying to start Express.js server with react application that I downloaded, but when I do npm start on my server there is error
ERROR in ./src/app.jsx
Module build failed: SyntaxError: Unexpected token (6:7)
4 | import 'react-select/dist/react-select.css';
5 |
> 6 | render(<div>Place your application here</div>, document.getElementById('app-root'));
Why would it be?

Try using this
import React from 'react';
import ReactDOM from 'react-dom';
import 'react-select/dist/react-select.css';
ReactDOM.render(
< div > Place your application here < /div>,
document.getElementById('root'));

Finally got it working by settings presets in webpack.config:
presets:['es2015','react'] - for error Uncaught SyntaxError: Unexpected token import
and npm install babel-preset-react + babel-preset-es2015