[v7] Hydration mismatch issues with React Router 7 Spa Mode

[bryanjtc]

Steps to reproduce

Steps:

1. Open this link to live example: (repo)
2. Install dependencies with yarn install
3. Run the dev server with yarn start

Current behavior

Hydration errors and ui doesn't render styles correctly

Expected behavior

I should be able to use the new material ui 7 version without hydration error in react router spa mode and react 18

Context

The ui should render correctly
Related: #44993 (comment)

Your environment

npx @mui/envinfo

I used Brave Browser
System:
    OS: Windows 11 10.0.26100
  Binaries:
    Node: 22.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (131.0.2903.70)
  npmPackages:
    @emotion/react: 11.14.0 => 11.14.0 
    @emotion/styled: 11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  7.0.1 
    @mui/icons-material: 7.0.1 => 7.0.1 
    @mui/material: 7.0.1 => 7.0.1 
    @mui/private-theming:  7.0.1 
    @mui/styled-engine:  7.0.1 
    @mui/system: 7.0.1 => 7.0.1 
    @mui/types:  7.4.0 
    @mui/utils:  7.0.1 
    @mui/x-charts: 8.0.0-beta.3 => 8.0.0-beta.3
    @mui/x-charts-vendor:  8.0.0-beta.3
    @mui/x-data-grid: 8.0.0-beta.3 => 8.0.0-beta.3
    @mui/x-date-pickers: 8.0.0-beta.3 => 8.0.0-beta.3
    @mui/x-internals:  8.0.0-beta.3
    @mui/x-tree-view: 8.0.0-beta.3 => 8.0.0-beta.3
    @types/react: 18.3.20 => 18.3.20
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1
    typescript: 5.8.2 => 5.8.2

Search keywords: react router, hydration, v7

[DiegoAndai]

@Janpot do you think this could be related to the ESM changes?

[Janpot]

@bryanjtc that looks like quite an extensive application. Could you try to narrow it down to a minimal reproduction just to make sure it's mui related. I hope you understand that we don't have the bandwidth to debug your whole application.

[bryanjtc]

@bryanjtc that looks like quite an extensive application. Could you try to narrow it down to a minimal reproduction just to make sure it's mui related. I hope you understand that we don't have the bandwidth to debug your whole application.

Yeah. The original application has a lot of pages and extensive logic. You can debug now, I erased all dependencies and logic not related to mui, react-router and to the Login Page.

[Janpot]

When I open your project in stackblitz I get

TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (https://llqiwykwkjgithub-bsmc--3101--d69c5f7b.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-ILK4XV7T.js?v=a81b1dd2:1086:29)
    at useFrameworkContext (https://llqiwykwkjgithub-bsmc--3101--d69c5f7b.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-SO2AXVIJ.js?v=a81b1dd2:8150:24)
    at Scripts (https://llqiwykwkjgithub-bsmc--3101--d69c5f7b.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-SO2AXVIJ.js?v=a81b1dd2:8463:71)
    at renderWithHooks (https://llqiwykwkjgithub-bsmc--3101--d69c5f7b.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-MVRAC76T.js?v=a1fcb096:11594:26)
    at mountIndeterminateComponent (https://llqiwykwkjgithub-bsmc--3101--d69c5f7b.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-MVRAC76T.js?v=a1fcb096:14972:21)
    at beginWork (https://llqiwykwkjgithub-bsmc--3101--d69c5f7b.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-MVRAC76T.js?v=a1fcb096:15960:22)
    at beginWork$1 (https://llqiwykwkjgithub-bsmc--3101--d69c5f7b.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-MVRAC76T.js?v=a1fcb096:19804:22)
    at performUnitOfWork (https://llqiwykwkjgithub-bsmc--3101--d69c5f7b.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-MVRAC76T.js?v=a1fcb096:19249:20)
    at workLoopSync (https://llqiwykwkjgithub-bsmc--3101--d69c5f7b.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-MVRAC76T.js?v=a1fcb096:19188:13)
    at renderRootSync (https://llqiwykwkjgithub-bsmc--3101--d69c5f7b.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-MVRAC76T.js?v=a1fcb096:19167:15)

useFrameworkContext seems to belong to react-router

When I try to run it locally I get

> yarn start  
Error: Cannot find module @rollup/rollup-darwin-arm64. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.
    at requireWithFriendlyError (?/node_modules/rollup/dist/native.js:64:9)
    at Object.<anonymous> (?/node_modules/rollup/dist/native.js:73:76)
    ... 3 lines matching cause stack trace ...
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24) {
  [cause]: Error: Cannot find module '@rollup/rollup-darwin-arm64'
  Require stack:
  - ?/node_modules/rollup/dist/native.js
      at Module._resolveFilename (node:internal/modules/cjs/loader:1225:15)
      at Module._load (node:internal/modules/cjs/loader:1051:27)
      at Module.require (node:internal/modules/cjs/loader:1311:19)
      at require (node:internal/modules/helpers:179:18)
      at requireWithFriendlyError (?/node_modules/rollup/dist/native.js:46:10)
      at Object.<anonymous> (?/node_modules/rollup/dist/native.js:73:76)
      at Module._compile (node:internal/modules/cjs/loader:1469:14)
      at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
      at Module.load (node:internal/modules/cjs/loader:1288:32)
      at Module._load (node:internal/modules/cjs/loader:1104:12) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
      '?/node_modules/rollup/dist/native.js'
    ]
  }
}

Manually installing @rollup/rollup-darwin-arm64 doesn't help

[bryanjtc]

I added darwin and arm64 to the supportedArchitectures list. That should fix the dependency problem. Instead of stackbliz try using codesandbox. I added the tasks.json and a devcontainer.json for an easier setup. https://codesandbox.io/p/github/bryanjtc/rr7-mui7-spa/main

[Janpot]

🤔 Locally, I don't see hydration errors anymore when I install react@19 and react-dom@19

[bryanjtc]

🤔 Locally, I don't see hydration errors anymore when I install react@19 and react-dom@19

Upgrading to react 19 isn't an option for me for now.

[bryanjtc]

Since the styles aren't rendering correctly, I'm thinking maybe the hydration error comes from emotion.

[bryanjtc]

I removed the line
<meta charSet="UTF-8" />
to get rid of this error

Now i have this one