How to resolve an error at reactDOM.render - reactjs

Question

index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "/src/App.jsx";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<>
<BrowserRouter>
<App />
</BrowserRouter>
</>,
document.getElementById("root")
);
App.jsx
import React from "react";
import { Switch, Route } from "react-router-dom";
import Home from "/src/Home.jsx";
function App() {
return (
<>
<Switch>
<Route exact path="/" component={Home} />
</Switch>
</>
);
}
export default App;
Here is the codesandbox:
https://codesandbox.io/s/webapp-3tw58
Getting an error, not understanding how to resolve it
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of App.

Answer 1

You've done some mistake over there, regarding import and all that.
First thing is you can't import with file extension.
import App from "/src/App.jsx";
instead
import App from "/src/App";
and same for App.jsx file as well.
import Home from "/src/Home";
OR
I'll suggest to use the relative import,
import App from "./App";
Maybe this is causing the actual issue.
Updated:
By looking into your codesandbox, you're using the react-router-dom#v6 and there is a different way of using the Route. Please read it from here.

Answer 2

As mentioned by #Pradip Dhakal, this is likely an issue caused by react-router-dom version mismatch. Updating route definition as per new documentation seems to solve the issue:
App.jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
);
}
export default App;
Home.jsx
import React from "react";
function Home() {
return <div>Home</div>;
}
export default Home;