material-ui
material-ui copied to clipboard
mui
[examples] Next.js example renders duplicate CSS (after downgrading to next v12.1.5)
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] I have tested the latest version
Current behavior 😯
Pull down the nextjs-with-typescript example:
$ curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/nextjs-with-typescript
$ cd nextjs-with-typescript
Downgrade next.js to 12.1.5 (from the bad 12.1.6 release) in the package.json:
───────┬────────────────────────────────────────────────────────────────────────────────────────────────
│ File: package.json
───────┼────────────────────────────────────────────────────────────────────────────────────────────────
1 │ {
2 │ "name": "nextjs-with-typescript",
3 │ "version": "5.0.0",
4 │ "private": true,
5 │ "scripts": {
6 │ "dev": "next dev",
7 │ "build": "next build",
8 │ "start": "next start",
9 │ "lint": "next lint",
10 │ "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest"
11 │ },
12 │ "dependencies": {
13 │ "@emotion/cache": "latest",
14 │ "@emotion/react": "latest",
15 │ "@emotion/server": "latest",
16 │ "@emotion/styled": "latest",
17 │ "@mui/icons-material": "latest",
18 │ "@mui/material": "latest",
19 > │ "next": "12.1.5",
20 │ "react": "latest",
21 │ "react-dom": "latest"
22 │ },
23 │ "devDependencies": {
24 │ "@types/node": "latest",
25 │ "@types/react": "latest",
26 │ "eslint": "latest",
27 │ "eslint-config-next": "latest",
28 │ "typescript": "latest"
29 │ }
30 │ }
───────┴────────────────────────────────────────────────────────────────────────────────────────────────
Install the dependencies, and run the development server:
$ npm i
$ npm run dev
Visit localhost:3000, right-click and View page source, Ctrl+F for style, watch the server send down duplicate CSS style tags in the <head> and <body> (😳)
Expected behavior 🤔
A clean, head-only style output
Steps to reproduce 🕹
Steps are detailed in Current behavior
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
$ npx @mui/envinfo
Need to install the following packages:
@mui/envinfo
Ok to proceed? (y) y
System:
OS: macOS 12.4
Binaries:
Node: 18.2.0 - /opt/homebrew/bin/node
Yarn: Not Found
npm: 8.9.0 - /opt/homebrew/bin/npm
Browsers:
Chrome: Not Found
Edge: Not Found
Firefox: Not Found
Safari: 15.5
npmPackages:
@emotion/react: 11.9.0 => 11.9.0
@emotion/styled: 11.8.1 => 11.8.1
@mui/base: 5.0.0-alpha.84
@mui/icons-material: 5.8.3 => 5.8.3
@mui/material: 5.8.3 => 5.8.3
@mui/private-theming: 5.8.0
@mui/styled-engine: 5.8.0
@mui/system: 5.8.3
@mui/types: 7.1.3
@mui/utils: 5.8.0
@types/react: 18.0.12 => 18.0.12
react: 18.1.0 => 18.1.0
react-dom: 18.1.0 => 18.1.0
typescript: 4.7.3 => 4.7.3
Tested in Chromium 101.0.4951.64 (Official Build, ungoogled-chromium) (arm64), Firefox Developer Edition 102.0b2 (64-bit), Safari 15.5 on an M1 Pro MacBook
