Context Provider Dev Server Bug

[keepforever]

I'm using React Router as a...

framework

Reproduction

I have reproduced the bug in THIS REPO

System Info

System:
    OS: macOS 15.3.2
    CPU: (10) arm64 Apple M4
    Memory: 438.17 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
  Browsers:
    Chrome: 135.0.7049.41
    Safari: 18.3.1
  npmPackages:
    @react-router/dev: ^7.4.1 => 7.4.1
    @react-router/node: ^7.4.1 => 7.4.1
    @react-router/serve: ^7.4.1 => 7.4.1
    react-router: ^7.4.1 => 7.4.1
    vite: ^5.4.11 => 5.4.17

Used Package Manager

npm

Expected Behavior

I wold expect that ChildOne would have access to the context because it's parent has access.

Actual Behavior

LOOM DEMO

ChildOne, clearly a child of the ContextBugDemo route component, yet, it doesn't seem to have access to the context that the parent has access too.

I'm accessing the context successfully in the ContextBugDemo component, so, that would suggest it's within the context provider.

However, the child fails to access the context

[keepforever]

I've been using this withWhateverContext pattern extensively with remix for a couple years, and, ran into a similar issue there, that was resolved at some point, but, it appears to have resurfaced in react-router v7

Sometimes, randomly, it will work sometimes, and I assume it has something to do with the react-router dev server HMR or something along those lines.

Here it is working randomly. But, if i make an edit to ChildOne and save, the error will come back

[pawelblaszczyk5]

If this is happening while saving and performing HMR it may be related to the fact that you aren’t supposed to export hooks and components from the same file.

You can check e.g. https://www.npmjs.com/package/eslint-plugin-react-refresh with additional configuration for RR it should warn you when you break HMR

[keepforever]

@pawelblaszczyk5 , you were right. Moving my useUtils hook into a file separate from my context boiler did the trick.

So, in summary, what works for me is

• typical react router route module in it's own file
• context boiler in it's own file
• useUtils hook in it's own file
• import withContext HOC into route module and `export default withContext(ViewComponent)

But, this is a pretty ambiguous "gotcha" that should probably be called out in the docs somewhere.

[pawelblaszczyk5]

AFAIK it’s unrelated to RR - it’s just how HMR in React works generally

[keepforever]

I take it back, it appeared to work briefly, now, it's back to giving me the crash and forcing a hard reload any time i change anything in a nested component that tries to access the context.

This is valid react code that runs and works as expected, but the DX of this is pretty much insufferable and now I"m gonna have to fall back to property drilling like a clown or try to use redux (🤮)

[timdorr]

I'm not seeing this when I run your example code: https://codesandbox.io/p/devbox/serverless-bush-g8g342

There don't appear to be any logical problems with your code. What you have should work as-is. It sounds like something else is interfering, which isn't related to React Router itself. So, this doesn't appear to be our bug.