React Tsx - document is not defined

Question

I have this simple application in React with Typescript that I created using Vite. When I start the application, I receive this error:

ReferenceError: document is not defined at getUrlBasedHistory (C:\Facultate\PraticaITPerspective\ITP_Library\itp-libray-app\node_modules@remix-run\router\dist\router.cjs.js:411:14) at Object.createBrowserHistory (C:\Facultate\PraticaITPerspective\ITP_Library\itp-libray-app\node_modules@remix-run\router\dist\router.cjs.js:234:10) at Proxy.createBrowserRouter (C:\Facultate\PraticaITPerspective\ITP_Library\itp-libray-app\node_modules\react-router-dom\dist\umd\react-router-dom.development.js:253:23) at C:\Facultate\PraticaITPerspective\ITP_Library\itp-libray-app\src\App.tsx:7:16 at async instantiateModule (file:///C:/Facultate/PraticaITPerspective/ITP_Library/itp-libray-app/node_modules/vite/dist/node/chunks/dep-df561101.js:55974:9).

I'm trying to use React-Router-Dom to create a multi-page-app.

app.tsx

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import RootLayout from "./pages/Root";
import HomePage from "./pages/HomePage";
import BookDetail from "./pages/BookDetail";

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { path:"/", element: <HomePage /> },
      { path: "/book/:id", element: <BookDetail /> },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

and this is entry-client and entry-server files:

import "./index.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import App from './App'

export function render() {
  const html = ReactDOMServer.renderToString(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  )
  return { html }
}

I tried almost all the options I found on the internet and none of them worked.

Answer 1

Bogdan, this error occurs in SSR scenarios, where Node.js doesn't have access to the document or window objects that are available only in the browser. I see you're using Vite along with react-router-dom, and going off the paths in your error message, it seems like SSR is involved.

Ensure that your client-side specific code is only executed on the client. For example, you can conditionally create the browser router:

let router;
if (typeof window !== 'undefined') {
  router = createBrowserRouter([...]);
}

Then in your App component:

function App() {
  return router ? <RouterProvider router={router} /> : null;
}

Make sure to properly hydrate the app on the client-side. Your entry-client file seems to be doing this, but double-check to ensure it's set up correctly.