[Docs]: Invalid hook call when using tutorial code with (Typescript) Create React App

[svenvandescheur]

Describe what's incorrect/missing in the documentation

When referencing the tutorial implementation: https://reactrouter.com/en/main/start/tutorial while using a Create React App setup (which imo should not matter for router functionality) and adding the boilerplate code:

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

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

to my index.tsx file.

I expect the page to show "Hello world!" as it should match the first route. However, a blank screen is shown and an error is logged to the console.

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

react.development.js:1622 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (react.development.js:1622:1)
    at RouterProvider (index.tsx:485:1)
    at renderWithHooks (react-dom.development.js:15486:1)
    at mountIndeterminateComponent (react-dom.development.js:20103:1)
    at beginWork (react-dom.development.js:21626:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27490:1)
    at performUnitOfWork (react-dom.development.js:26596:1)

The issue seems to be caused by the <RouterProvider router={router} /> line, removing it makes the error go away (and logically results in a blank screen).

I'm unsure whether this is something to be fixed in the documentation or a bug.

[svenvandescheur]

💩Whoopsie: my mistake. Turned out I accidentally installed react-router-dom in the wrong directory (I have a seperate frontend dir) causing all kind of React issues to appear. This is not a bug in this library.