Question 205361 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – ReferenceError: document is not defined (React)

I tried to render my main page working with routes and I still have the same ReferenceError.

Here’s my code :

import React from "react";
import ReactDOM from "react-dom/client";
import App from "../components/app";
import reportWebVitals from "./reportWebVitals";
import {
 createBrowserRouter,
 RouterProvider,
} from "react-router-dom";
import Product from "./products/product";
const router = createBrowserRouter([
{
  path: "/",
  element: <App />,
},
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);
reportWebVitals();
Tags:

2

Answers


  1. 0

    createRoot(rootElement) is a React utility function used to create a react root element, which is a DOM element in which UI components render themselves. It takes as a parameter the root element that should be created. This root element is not a React component, it is simply an empty div element that is used for React to render itself.

    So you should have an HTML file with empty div and id="root" in order to render the react page.

    Login or Signup to reply.
  2. 0

    Seen as people are still replying to this question, during a Chat session with OP, it turns out he’s using Next.JS, this does SSR and as such doesn’t have document as it’s using Server Side Rendering.

    The solution for the OP, was just don’t do any React mounting stuff in the first place, as this is all handled for you, including routing logic, Typescript support etc etc.

    For those just starting React & using Next.JS, one bit of advice is to follow Next.JS specific documentation to start, and then move onto other React tutorials found on the internet, and then these will make more sense.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search