CODEWITHSUNDEEP
reactjs
User135624
User135624

Reputation: 23

How to resolve an error at reactDOM.render

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.

Upvotes: 1

Views: 1102

Answers (2)

NeERAJ TK
NeERAJ TK

Reputation: 2695

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;

Upvotes: 1

Pradip Dhakal
Pradip Dhakal

Reputation: 1962

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.

Upvotes: 2

Related Questions