Invalid hook call, Cannot read properties of null (reading 'useRef'), Cannot read properties of null (reading 'useContext') while using Routes, Route

I am creating React App and everything was ok until I tried to connect the pages using Routes and Route.

I got error:

“Cannot read properties of null (reading 'useRef')” or ‘useContext’ in google chrome
“null is not an object (evaluating 'dispatcher.useRef')” in Safari
“Invalid hook call” in console in google chrome

(I don't use useRef, just Context)

Imports work well because when I import f.e. only HomePage in App function it works. Problems appears when I try use Routes, Route

Any ideas why and how to solve it?

in App.jsx I got

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";
import "./App.css";

function App() {
    return (
        <>
            <Router>
                <Routes>
                    <Route path="/" element={<HomePage />} />
                    <Route path="/about" element={<AboutPage />} />
                </Routes>
            </Router>
        </>
    );
}

export default App;

in index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

reportWebVitals();

And question about script in index.html

<body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <script type="module" src="../src/index.js"></script>
    </body>

Did I do it correctly? At first I had type="module" but I got an error in the browser console: "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec." At the beginning I changed "module" to "text/html", but it implements js/jsx so this html does not fit my logic here.

I feel like I've already looked through the entire internet, but I can't figure out what it's all about and how to improve it.

The problem appeared when Routes, Route was introduced (I mean, I try to introduce).

Any ideas, tips, solutions? Or maybe there is another way to do it?

Or maybe I have the wrong packages installed and/or in a wrong way? What should I install, where and how?

Solution

I think your problem is at index.js, you need to add the BrowserRouter, that allows router works. Here you have an example for your index.js.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import {BrowserRouter} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>
);

reportWebVitals();

EDIT 1

After your comment, this is the App.js file that I have:

import { Route, Routes } from 'react-router-dom';
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";
import "./App.css";

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>
  );
}

export default App;

EDIT 2

This is how my project looks

And this is my package.json

{
  "name": "ReactTest3",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/icons-material": "^5.10.9",
    "@mui/material": "^5.10.10",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

You say that you have two node_modules folders, that is not correct, I think that project is corrupt because of different folders and npm installation.

These are the steps that I wrote to test your project.

npx create-react-app ReactTest3
cd ReactTest3 and npm start (This is just to check the react installation)
Added both components (HomePage and AboutPage)
Create some test text for both, here you have an example:
`import React from 'react'

export const HomePage = () => { return ( Hello from Home ) }`
npm i react-router-dom
Changed the App.js code to be able to use routes (Example is on Edit 1)
Changed the index.js code to be able to use routes (Example is on the first answer)
It works!
If this does not work for you, I recommend to go to the React Router and try that example. https://v5.reactrouter.com/web/guides/quick-start