react SSR className mismatch in production mode #14840

chnliquan · 2019-03-11T02:50:37Z

In the development environment, ssr runs normally. When running in the production environment, the page is opened for the first time. The style corresponding to the class name exists, but there is no defined css.

This is not a v0.x issue.
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Current Behavior 😯

Steps to Reproduce 🕹

The development environment is normal, the production environment is rendered incorrectly for the first time, the console does not have any error or warning, and all configurations are configured according to the document. It puzzled me for two days without solving it. please help me

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v3.9.2
React	v16.8.3
Browser	chrome
Jss	v9.8.7
jss-preset-default	v10.0.0-alpha.7

joshwooding · 2019-03-11T07:38:00Z

Do you have a minimal reproducible example? Looking at the ssr example might help you https://github.com/mui-org/material-ui/tree/next/examples/ssr

chnliquan · 2019-03-11T15:02:40Z

@joshwooding I have the same configuration as the documentation you provided. I still have this problem, and it only appears in the production environment. The development environment is fine. Should I upload the project to github and attach the link address?

joshwooding · 2019-03-11T18:38:10Z

@chnliquan Yes please :)

chnliquan · 2019-03-12T04:57:59Z

@joshwooding https://github.com/chnliquan/react-cnode
use the production mode wil accur this issue

npm install
npm run build
npm start
open http://localhost:9000

oliviertassinari · 2019-03-12T11:19:07Z

@chnliquan I have tried your reproduction. It's working great on my end.

chnliquan · 2019-03-12T13:44:58Z

@oliviertassinari Are you sure you are in a production environment? First use npm run build to package, then npm start to start the service, open http://localhost:9000. In the first rendering, the className of the list page will not match (it lead the list item user avatar becomes very large), and the tab will be restored. I just executed it again, the same problem.

@material-ui/core v3.9.2
@material-ui/core v3.0.2
@jss v9.8.7
@jss-preset-default-10.0.0-alpha.7

atulmy · 2019-03-12T22:25:23Z

Facing similar JSS issues with SSR: One or more classnames share common styles.

Please check code here: https://github.com/atulmy/hire-smart (open source project)
And live website here: https://hiresmart.app/ (try to repeatedly move between routes)

Check following screenshot:

chengjia0807 · 2019-03-13T13:19:50Z

Same issue here, looking for help

oliviertassinari · 2019-03-13T13:27:54Z

You should find a solution in https://next.material-ui.com/guides/server-rendering/#troubleshooting. However, this issue is soo common, I'm going to change some architectural choices.

MBach · 2019-03-13T13:40:58Z

I don't know if it's the same issue @oliviertassinari but I'm not the only one with unpredictable JSS injection.

On hiresmart, we can see that styles are messed up (like my website, not published yet):

On my side, it's when I'm mixing old school Theme with Hooks:

import { createMuiTheme } from '@material-ui/core/styles'
import { makeStyles } from '@material-ui/styles'
const theme = createMuiTheme({
  overrides: {
    // lots of overrides here
  }
})
const styles = theme => ({ ... })
const useStyles = makeStyles(...)
export { theme, styles, useStyles }

 <ThemeProvider theme={theme}>
  <Router>
    ...
  </Router>
</ThemeProvider>

class Request extends Component {

}
export default withStyles(styles, { withTheme: true })(Request)

oliviertassinari · 2019-03-13T14:07:27Z

@MBach Are you doing server-side rendering?

MBach · 2019-03-13T14:35:21Z

I'm not, it's just a react-scripts build but the issue described here is very similar to what I encounter.

oliviertassinari · 2019-03-13T14:49:00Z

@MBach Interesting, how can we produce it?

MBach · 2019-03-13T14:52:31Z

Actually I'm creating a repository where I'm removing everything "not critical" but I have some other deadlines until next week ...

ghost · 2019-03-13T16:08:14Z

I experience this (or related) issue on the nextjs-next example, whereas before 4.0.0-alpha.3 everything was fine.
I don't see a console error about mismatched classnames but I do see the server render without styles then styles come in when the client renders.

I saw this from a fully clean checkout of the example.

chnliquan · 2019-03-14T01:58:53Z

You should find a solution in https://next.material-ui.com/guides/server-rendering/#troubleshooting. However, this issue is soo common, I'm going to change some architectural choices.

I have checked it many times, all the steps are the same as described in the documentation, or there is still this problem 😫. https://next.material-ui.com/guides/server-rendering/#troubleshooting

chnliquan · 2019-03-14T02:58:51Z

@chnliquan I have tried your reproduction. It's working great on my end.

You are running normally because the server failed to get the initial data, and then the client retrieved the request and re-rendered it. I also reappear on my colleague's machine, but if the initial data is taken, the rendering will appear className mismatch

atulmy · 2019-03-14T21:32:32Z

I'm also getting this warning:
Warning: Prop className did not match. Server: "MuiSvgIcon-root-1481" Client: "MuiSvgIcon-root-61"

oliviertassinari · 2019-03-25T10:10:30Z

We are introducing a server-side rendering API: #15030. I hope this new API will leave very little room for error.

MBach · 2019-03-25T13:06:56Z

Oh, by the way @oliviertassinari, I found a way to solve my bug, and maybe this issue I don't know. I had to specify an extra prop to my styles in order to put injected css at the right position:

const useStyles = makeStyles(
  theme => ({
    drawerBase: {
      width: 275,
      flexShrink: 0
    }, // etc...
  }),
  { name: 'HookGlobalStyles', index: 2 }
)

0-Captain · 2019-03-26T13:42:34Z

@oliviertassinari I want know how did you confirm the classNames of client are same to server and ensure them can't mismatch

oliviertassinari · 2019-03-26T13:49:53Z

@0-Captain I'm not sure to follow your question. We are documenting the most common source of problems: https://material-ui.com/guides/server-rendering/#troubleshooting.

0-Captain · 2019-03-26T13:58:01Z

@oliviertassinari It seems that the client's generateClassName have no relation with server's generateClassName, so how to ensure it work rightly？I have looked the solution and correct my code, but no effect. The className still mismatch when first render。

oliviertassinari · 2019-03-26T14:09:52Z

@0-Captain The problem is handled by #15030. Do you think that you could move to v4.0.0-alpha.6 when it's released this weekend?

0-Captain · 2019-03-26T14:16:58Z

@oliviertassinari Ok, thank you

girlsfamily · 2019-04-01T05:05:22Z

The latest ssr-next example does not work when running production. like this
<style data-jss="" data-meta="makeStyles"> .jss1 { text-align: center; padding-top: 160px; } </style>
<div class="App-root-1"></div>
Am I doing something wrong? @oliviertassinari

oliviertassinari · 2019-04-01T07:47:44Z

@girlsfamily I have just tried the example. It's working fine.

girlsfamily · 2019-04-02T03:08:14Z

It's my fault. it's good now

mbrevda · 2019-06-10T11:41:57Z

@girlsfamily what was your fix?

girlsfamily · 2019-06-12T01:13:40Z

@girlsfamily what was your fix?

try the latest ssr example. I missed cross-env NODE_ENV=production before

mbrevda · 2019-06-12T05:28:11Z

NODE_ENV=production fixed it here, too. Thanks!

artworkjpm · 2019-09-06T13:09:15Z

I have this problem, where to do I add NODE_ENV=production in my create-react-app?

dallen4 · 2019-10-29T22:22:21Z

Can anyone explain why it NODE_ENV has to be set to production? We are trying to deploy test applications and just ran into this error for two hours before I just tried setting the env var to production instead of testing. I feel like the CSS injection should be agnostic to development environment, no?

oliviertassinari · 2019-10-29T22:28:55Z

@dallen4 As long as the client and the server use the same value for process.env.NODE_ENV, you should be good, it doesn't need to be a specific value but it needs to match.

flycj · 2019-11-20T02:21:03Z

@chnliquan I have tried your reproduction. It's working great on my end.

You are running normally because the server failed to get the initial data, and then the client retrieved the request and re-rendered it. I also reappear on my colleague's machine, but if the initial data is taken, the rendering will appear className mismatch

I have the same problem as you. How did you solve it? I really need your help. Thank you

nemethricsi · 2020-03-30T09:59:38Z

Oh, by the way @oliviertassinari, I found a way to solve my bug, and maybe this issue I don't know. I had to specify an extra prop to my styles in order to put injected css at the right position:
const useStyles = makeStyles(
  theme => ({
    drawerBase: {
      width: 275,
      flexShrink: 0
    }, // etc...
  }),
  { name: 'HookGlobalStyles', index: 2 }
)

can't believe but it solved my issue as well! Thanks! :)

calvinkei · 2021-01-19T15:59:31Z

Oh, by the way @oliviertassinari, I found a way to solve my bug, and maybe this issue I don't know. I had to specify an extra prop to my styles in order to put injected css at the right position:
const useStyles = makeStyles(
  theme => ({
    drawerBase: {
      width: 275,
      flexShrink: 0
    }, // etc...
  }),
  { name: 'HookGlobalStyles', index: 2 }
)

this is amazing, i have been looking for solutions for months

joshwooding added the status: waiting for author Issue with insufficient information label Mar 11, 2019

oliviertassinari self-assigned this Mar 12, 2019

oliviertassinari added package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5. and removed status: waiting for author Issue with insufficient information labels Mar 13, 2019

oliviertassinari mentioned this issue Mar 31, 2019

[example] Simplify ssr examples #15127

Merged

oliviertassinari closed this as completed in #15127 Mar 31, 2019

react SSR className mismatch in production mode #14840

react SSR className mismatch in production mode #14840

Comments

chnliquan commented Mar 11, 2019 • edited Loading

Expected Behavior 🤔

Current Behavior 😯

Steps to Reproduce 🕹

Context 🔦

Your Environment 🌎

joshwooding commented Mar 11, 2019 • edited Loading

chnliquan commented Mar 11, 2019

joshwooding commented Mar 11, 2019

chnliquan commented Mar 12, 2019

oliviertassinari commented Mar 12, 2019

chnliquan commented Mar 12, 2019

atulmy commented Mar 12, 2019 • edited Loading

chengjia0807 commented Mar 13, 2019

oliviertassinari commented Mar 13, 2019

MBach commented Mar 13, 2019 • edited Loading

oliviertassinari commented Mar 13, 2019 • edited Loading

MBach commented Mar 13, 2019

oliviertassinari commented Mar 13, 2019

MBach commented Mar 13, 2019

ghost commented Mar 13, 2019

chnliquan commented Mar 14, 2019

chnliquan commented Mar 14, 2019

atulmy commented Mar 14, 2019

oliviertassinari commented Mar 25, 2019

MBach commented Mar 25, 2019

0-Captain commented Mar 26, 2019

oliviertassinari commented Mar 26, 2019

0-Captain commented Mar 26, 2019 • edited Loading

oliviertassinari commented Mar 26, 2019

0-Captain commented Mar 26, 2019

girlsfamily commented Apr 1, 2019

oliviertassinari commented Apr 1, 2019 • edited Loading

girlsfamily commented Apr 2, 2019

mbrevda commented Jun 10, 2019

girlsfamily commented Jun 12, 2019

mbrevda commented Jun 12, 2019

artworkjpm commented Sep 6, 2019 • edited Loading

dallen4 commented Oct 29, 2019

oliviertassinari commented Oct 29, 2019 • edited Loading

flycj commented Nov 20, 2019 • edited Loading

nemethricsi commented Mar 30, 2020

calvinkei commented Jan 19, 2021

chnliquan commented Mar 11, 2019 •

edited

Loading

joshwooding commented Mar 11, 2019 •

edited

Loading

atulmy commented Mar 12, 2019 •

edited

Loading

MBach commented Mar 13, 2019 •

edited

Loading

oliviertassinari commented Mar 13, 2019 •

edited

Loading

0-Captain commented Mar 26, 2019 •

edited

Loading

oliviertassinari commented Apr 1, 2019 •

edited

Loading

artworkjpm commented Sep 6, 2019 •

edited

Loading

oliviertassinari commented Oct 29, 2019 •

edited

Loading

flycj commented Nov 20, 2019 •

edited

Loading