Router in react-router-dom throws an error in the console with no message

I am currently building an app and am running into this weird react-router-dom error from the Route component.

I am not sure why i am getting production error messages when i have enabled "devtool: 'inline-source-map'," in webpack but essentially I am not sure what throws the error. This is my current front end set up

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import HomePage from './components/Homepage';

render(
  <Router>
    <div> Hello from react </div>
    <Route path="/" element={<HomePage />} /> 
  </Router>,
  document.getElementById('app-portal')
);

and by commenting out <Route path="/" element={<HomePage />} /> the app works but of course I need Route to work for this app...

Here is my package.json dependencies.

"dependencies": {
    "axios": "^0.26.1",
    "express": "^4.17.3",
    "html-webpack-plugin": "^5.5.0",
    "nodemon": "^2.0.15",
    "path": "^0.12.7",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.7.4",
    "@babel/core": "^7.12.10",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-stage-2": "^7.8.3",
    "@babel/register": "^7.7.4",
    "assert": "^2.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^8.2.5",
    "babel-plugin-styled-components": "^1.12.0",
    "css-loader": "^6.7.1",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.8.2",
    "file-loader": "^6.2.0",
    "morgan": "^1.10.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  },

Has anybody run into a similar issue? If so how was it resolved?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/Tgl9aEZ