Styles not loading in RR v7

[anapeksha]

Steps to reproduce

Steps:

1. Open this link for git repo: https://github.com/authsafe1/dashboard/tree/react-router-v7
2. Run the app with: npm run dev

Current behavior

MUI loading without any styles. I am using React Router v7 Framework mode.

Safari:

Chrome:

Expected behavior

App should load the styles too.

Context

No response

Your environment

System:
OS: macOS 15.4
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
pnpm: Not Found
Browsers:
Chrome: 135.0.7049.42
Edge: Not Found
Safari: 18.4
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
@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-date-pickers: ^8.0.0-beta.3 => 8.0.0-beta.3
@mui/x-internals: 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.7.2 => 5.8.3

Search keywords: react-router-v7 blank-styles

[anapeksha]

Shows Hydration error in the Browser console.

[tuckerwales]

You have invalid HTML and you're just missing the emotion-insertion-point meta tag.

[anapeksha]

I still get a hydration error after fixing the code.

[anapeksha]

The error is showing up in the loader component, but I cannot understand from where.

[siriwatknp]

@anapeksha I cannot see the repo that you linked, can you please check.

[anapeksha]

@siriwatknp https://github.com/authsafe1/dashboard