Cannot read properties of undefined (reading 'createContext') while not using createContext

Question

I'm very new to react and MERN stack at general. I have this error that initially was that react was duplicated so i followed some tutorials and got to "fixed"(just to have this error).

Uncaught TypeError: Cannot read properties of undefined (reading 'createContext')

eval                                        @   index.js:88
./node_modules/react-router/index.js        @   bundle.js:970
__webpack_require__                         @   bundle.js:1093
eval                                        @   index.js:41
./node_modules/react-router-dom/index.js    @   bundle.js:959
__webpack_require__                         @   bundle.js:1093
eval                                        @   App.js:7
./src/app/App.js                            @   bundle.js:358
__webpack_require__                         @   bundle.js:1093
eval                                        @   index.js:6
./src/app/index.js                          @   bundle.js:435
__webpack_require__                         @   bundle.js:1093
(anonymous)                                 @   bundle.js:1145
(anonymous)                                 @   bundle.js:1147

I must say I'm not trying to use 'createContext', I also think the error has something to do with my dependencies and Webpack (or maybe my database, idk), because I already tried cleaning my code by deleting almost everything and living just index.js / App.js with barely a <p tag.

Any help will be very helpfull thanks.

//index.js
import React, {Component} from 'react';
import {render} from 'react-dom';
import App from './App';


render (<App/>, document.getElementById('app'));

//App.js
import React, {Component} from 'react';
import { BrowserRouter as Router, Routes, Route, Switch } from "react-router-dom";
import jwt_decode from 'jwt-decode';
import setAuthToken from '../utils/setAuthToken';
import {setCurrentUser, logoutUser} from '../actions/authActions';


import {Provider} from 'react-redux';
import store from '../store';

import Landing from './Landing';
import Register from './Register';
import Login from './Login';
import PrivateRoute from './components/private-route/PrivateRoute';
import Dashboard from './components/dashboard/Dashboard';


//Check for token to keep user logged in

if (localStorage.jwtToken){
    //Set auth token header auth
    const token = localStorage.jwtToken;
    setAuthToken(token);
    //Decode token and get user info and exp
    const decoded = jwt_decode(token);
    //set user and isAuthenticated
    store.dispatch(setCurrentUser(decoded));

    //Check for expired token 
    const currentTime = Date.now() / 1000; // to get in milliseconds

    if (decoded.exp < currentTime){
        //logout user
        store.dispatch(logoutUser());

        //redirect to login
        window.location.href = './login';
    }
}

export default class App extends Component {



render(){
    return (
        <Provider store={store}>
            <Router>
                <div className="App">
                <Routes> 
                        
                <Route path="/" element={<Landing/>}/>
                <Route path="/register" element={<Register/>}/>
                <Route path="/login" element={<Login/>}/>

                        
                </Routes>      
                
                </div>
            </Router>
        </Provider>
        )
    }
}

//package.json
{
  "name": "mern-taskplanner",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node src/index.js",
    "dev": "nodemon src/index.js",
    "webpack": "webpack --mode development --watch"
  },
  "proxy": "http://localhost:3000",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "@babel/preset-react": "^7.16.5",
    "axios": "^0.24.0",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.1",
    "classnames": "^2.3.1",
    "concurrently": "^6.5.1",
    "express": "^4.17.2",
    "is-empty": "^1.2.0",
    "jsonwebtoken": "^8.5.1",
    "jwt-decode": "^3.1.2",
    "mongoose": "^6.1.3",
    "morgan": "^1.10.0",
    "passport": "^0.5.2",
    "passport-jwt": "^4.0.0",
    "prop-types": "^15.8.1",
    "react-redux": "^7.2.6",
    "react-router": "^6.2.1",
    "react-router-dom": "^6.2.1",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "validator": "^13.7.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^2.0.15",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "redux-devtools-extension": "^2.13.9",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}

//webpack.config.js


module.exports = {

    entry:'./src/app/index.js',
    output: {

        path: __dirname + '/src/public',
        filename: 'bundle.js'
    },

    module: {
        rules:[
            {
                use: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },