React 19.1.0 "TypeError: Cannot read properties of null (reading 'useContext')"

[Evanion]

Reproduction

Evanion/RR7-issue

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1355U
    Memory: 14.79 GB / 31.64 GB
  Binaries:
    Node: 22.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.1 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (137.0.3296.52)
    Internet Explorer: 11.0.19041.5794
  npmPackages:
    @react-router/dev: ^7.6.3 => 7.6.3
    @react-router/node: ^7.6.3 => 7.6.3
    @react-router/serve: ^7.6.3 => 7.6.3
    react-router: ^7.6.3 => 7.6.3
    vite: ^6.0.0 => 6.3.5

Used Package Manager

npm

Expected Behavior

When running React-router, it should work with react 19.1.0

Actual Behavior

This only happens when running it in NX, I can't reproduce it in a plain react-router repo. But from what I know in how NX works, it's basically just an orchestration layer on top of the react-router cli.

When you upgrade from react 19.0.0 to 19.1.0, the site breaks. If you downgrade back to 19.0.0, it works again. My though is that nx is probably only illuminating a flaky issue. as I have had the same issue in other plain react-router repos, but only on first render, and a reload would get you past it, but in this case it's persistent.

[timdorr]

Possibly related to #13991 or remix-run/remix#10455

[sergiodxa]

NX the monorepo tool? This error is most likely because you have two copies of RR or React.

[MattyBalaam]

If this is a case of there being tow copies of RR or React is there a way for the React Router dev/build processes to throw a warning about this situation?

We get this error a lot in our yarn workspaces monorepo - often when switching branches I have noticed, although we have somewhat mitigated by using the server warmup option. But we have done everything we can to make sure there are matching versions everywhere by using the resolutions field in our root package.json file.

[michael-land]

i noticed that it always happened when vite optimizing dependencies on first run, it does not show afterward.

5:49:35 PM [vite] (client) ✨ new dependencies optimized: ....
5:49:35 PM [vite] (client) ✨ optimized dependencies changed. reloading

[itsjavi]

This still happens even after enabling future.unstable_optimizeDeps: true, in react-router.config.ts. I am using React Router 7.8.0 and Vite 7.1.1 + React 19.1.1

It always happens when Vite detects that optimized dependencies have changed.

This is my config:

import type { Config } from '@react-router/dev/config'
import { vercelPreset } from '@vercel/react-router/vite'

export default {
  ssr: true,
  presets: process.env.VERCEL ? [vercelPreset()] : undefined,
  future: {
    unstable_middleware: true,
    unstable_optimizeDeps: true
  },
} satisfies Config

[yuheitomi]

This setting on vite.config.ts may help (server.warmup.clientFiles)

https://github.com/remix-run/react-router/issues/12786#issuecomment-2634033513

[kschiffer]

Chiming in here to say that I'm also experiencing this issue on react/react-dom 19.1.1 and React Router 7.8.2 and none of the proposed solutions proposed here have helped. The issue is also persistent, and does not go away after the initial page load. It suddenly appeared after removing the node_modules/.vite cache (due to experiencing stale caches for some modules). I've also checked react, react-dom and react-router via npm list to confirm they were all using the same versions.

Oops!
Cannot read properties of null (reading 'useContext')

TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (http://localhost:5173/node_modules/.vite/deps/chunk-UGC3UZ7L.js?v=5810cfe5:877:27)
    at useParams (http://localhost:5173/node_modules/.vite/deps/chunk-647GCSWC.js?v=5810cfe5:5273:28)
    at WithComponentProps (http://localhost:5173/node_modules/.vite/deps/chunk-647GCSWC.js?v=5810cfe5:6315:15)
    at Object.react_stack_bottom_frame (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=a7ee1621:17424:20)
    at renderWithHooks (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=a7ee1621:4206:24)
    at updateFunctionComponent (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=a7ee1621:6619:21)
    at beginWork (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=a7ee1621:7654:20)
    at runWithFiberInDEV (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=a7ee1621:1485:72)
    at performUnitOfWork (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=a7ee1621:10868:98)
    at workLoopSync (http://localhost:5173/node_modules/.vite/deps/react-dom_client.js?v=a7ee1621:10728:43)

The issue appears (likely) at the hydration step, as I can see the initial server side render just fine.

[parsagholipour]

This setting on vite.config.ts may help (server.warmup.clientFiles)

#12786 (comment)

I tried this config and still have the error on the first load (both production and dev)

  server: {
    warmup: {
      clientFiles: [
        './app/**/*',
        '!**/*.server.ts',
      ],
    },
  },

[itsjavi]

are you also using unstable_optimizeDeps: true on react-router.config.ts ? @parsagholipour

[parsagholipour]

are you also using unstable_optimizeDeps: true on react-router.config.ts ? @parsagholipour

Yes, I'm not sure if my problem is totally identical but I think it is related. I get the ssr page loaded but it crashes on hydration (very much similar to https://github.com/remix-run/react-router/issues/13998#issuecomment-3251499578). After the first load everything works perfect. This started happening after migrating from remix to react router.