[examples] Next.js example renders duplicate CSS (after downgrading to next v12.1.5)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up β it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with examples/nextjs-with-typescript/package.json, set Next.js to 12.1.5, install dependencies, and run npm run dev. Inspect the generated page source at localhost:3000 for duplicate style tags; done means styles are emitted once in the head rather than duplicated in the body.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100