[Single Fetch] Root did not complete. This is a bug in React.

[jansedlon]

I'm using React Router as a...

framework

Reproduction

I'm reposting this issue from remix-run repo after an agreement with @brookslybrand since the author @phuctm97 of the comment saying that this happens on RR7 as well did not create an issue here. Link to the original issue

---

Sadly I don't have a reproduction because i received the errors in Sentry and it mostly happened in Instagram browser and sometimes chrome.

However i enabled single fetch by updating vite.config.ts and then adding nonce to RemixServer. That's all.

Then i started seeing errors in sentry saying Root did not complete. This is a bug in React.. It happened on multiple pages like login and some others. This is a production environment with thousands of visitors every day, it's hard to pinpoint why it happened.

My react version is 18.3.1

System Info

System:
    OS: macOS 15.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 3.14 GB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    pnpm: 9.12.2 - ~/Library/pnpm/pnpm
    bun: 1.1.34 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 130.1.71.123
    Safari: 18.1

Used Package Manager

pnpm

Expected Behavior

It shouldn't throw any errors

Actual Behavior

It does. However, I have no idea how to debug something like this since it hasn’t happened to me.

[mikkpokk]

Generally react-dom throws the error whenever root rendering fails - usually caused by unexpected error during initial render.

I add some additional questions, which answers may bring us closer to the cause

• Do you use css-modules or bundled css? As a side note: there are some random hydration errors when using css-modules with lazy load, which causes random hydration error and results with hard reload in development mode (React Router caught the following error during render TypeError: Cannot read properties of null (reading 'useSyncExternalStore')).
• Have you upgraded React to v19? It has been released as stable release since 5th December 2024.
• Have you tried to debug it via phone browser by connecting phone with your machine and investigate console output? There's no such thing as Instagram browser. Instagram (or any other mobile app) uses Safari on iOS or Android Browser / Google Chrome on Android. Only difference is user-agent value and viewport size.

Here is simple step-by-step guide, how to debug iOS Safari using user agent of any app browser. Something similar goes with Android most likely.

[jansedlon]

@mikkpokk I only use tailwindcss via the native integration.

I have not because some of the packages that i use are not compatible with React 19, for example @react-email/components doesn't render links when using React 19 so for now React 19 is a no go for me :/ And it's not as simple to try it out because in order to test it, i would have to turn on single fetch and update to react 19. If it goes wrong, i would have turn it off and it would for my users because turning off single fetch is a breaking change.

I think there's more to it other than the user-agent and viewport size. Not necessarily engine wise, but from time to time i see hydration mismatches and when i looked at the diff, Instagram somehow interpolates hsl color specified in style property to rgb (i don't think safari itself would do that, or..?)

But this issue definitely happens on desktop chrome. At least from the errors that i received.

I should also include my discord thread that i created. There's more issues that started occurring when i turned on single fetch. Things like

1. Cannot read properties of null (reading 'useContext') - I didn't have two version of react and it happened with every deployment
2. Loader data beingnull - Not possible on that specific routes
3. No stream found for single fetch decoding

Discord thread

[mikkpokk]

Not necessarily engine wise, but from time to time i see hydration mismatches and when i looked at the diff, Instagram somehow interpolates hsl color specified in style property to rgb (i don't think safari itself would do that, or..?)

Yes, browsers convert HSL color values to RGB in the DOM - including latest Safari and Google Chrome.

Here's why:

• Browsers render web pages by translating CSS styles into visual elements. The graphics hardware that displays these elements typically operates with RGB color values.
• Converting HSL to RGB during rendering allows for faster processing and display of colors.
• This approach ensures consistent color representation across different browsers and platforms.

While you might define a color using HSL in your CSS, the browser will internally convert it to RGB for optimal rendering performance and cross-browser compatibility.

In case you are using direct style properties, this may cause hydration errors with SSR frameworks.

Usually you see DOM replacements when you navigate from link A to link B using CSR navigation.

Solution: Use RGB inside style properties or use classes for style instead.

Cannot read properties of null (reading 'useContext') - I didn't have two version of react and it happened with every deployment

You have to find the line where it's thrown. Basically what the error says, your code tries to run something like this:

const test = null
test.useContext() // <-- throws: Cannot read properties of null (reading 'useContext')

[jansedlon]

Thank you for the information about rgb/hsl, i didn't know about that.

About the Cannot read properties of null, that's not possible in my app and it hasn't happened before, only when i enabled single fetch. As well as the other issues that are mentioned in the discord thread.

[mikkpokk]

About the Cannot read properties of null, that's not possible in my app and it hasn't happened before, only when i enabled single fetch. As well as the other issues that are mentioned in the discord thread.

I was able to replicate the very same error on my project as well. It doesn't happen on every route, in my case it happens where user can submit a post (form page). I'm using RR7, React 19 and Vite 5.4.11. I have only 1 React version as well. The error caused by Vite's faulty code compilation. Still not sure why it happens. In dev mode it causes hard reload and error dissapears after that.

Error points to Vite's compiled file. No issues on real code. I can repeat the error every time when I delete /node_modules/.vite cache directory.

This is what my vite.config.ts file looks like

import {reactRouter} from '@react-router/dev/vite'
import {defineConfig} from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
import svgr from 'vite-plugin-svgr'
import path from 'path'

export default defineConfig({
    plugins: [reactRouter(), tsconfigPaths(), svgr({
        svgrOptions: {
            plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
            svgoConfig: {
                plugins: [
                    {
                        name: 'preset-default',
                        params: {
                            overrides: {
                                removeViewBox: false,
                                collapseGroups: false,
                                mergePaths: false,
                                removeUnknownsAndDefaults: false,
                                removeUselessStrokeAndFill: false,
                                convertPathData: false,
                            },
                        },
                    },
                    'prefixIds',
                ],
            },
        },
        include: '**/*.svg?react',
        exclude: '',
    })],
    resolve: {
        alias: {
            '@@': path.resolve(__dirname, 'app/'),
        },
    },
    ssr: {
        noExternal: ['remix-utils', 'remix-i18next', 'i18next-http-backend'],
    },
    css: {
        preprocessorOptions: {
            scss: {
                api: 'modern',
            },
        },
    },
})

[jansedlon]

Yeah on dev it happens even with the flag 'unstable_optimizeDeps' but also in production

[mikkpokk]

@jansedlon In my case issue is triggered by Vite whenever any component uses react-select package. Issue goes away permanently when I remove react-select package. The root cause, why react-select triggers that, is unknown.

[thomaswelton]

Cannot read properties of null (reading 'useContext') - I didn't have two version of react and it happened with every deployment

Might be related to this issue here #12786

[nhim175]

Not sure if this is useful for the investigation, but in may case, I got the same error on iOS Safari (https://react.dev/errors/345?invariant=345).
During the initial load (SSR), if I scroll up and down the page, that error will happens and when the page is fully loaded, I cannot interact with buttons, the sliders won't work either.

[superlucky84]

I'm a user who wants to migrate from Remix to React Router 7, but I had to put it on hold because I encountered this issue as well. It's really hard to track down since it happens sporadically. I think it would be great if there were just an option to disable single fetch in RR7.