Initial render styling issue with Nextjs / nx Nrwl / Material UI styles in production. Has anyone run into this issue before?

0
votes

I am trying to run nx nrwl with the next js plugin and material ui.

It all works fine in our dev builds, but the material-ui/styles breaks when we serve the production build. All of the classes we use in makeStyles are not applying correctly in the first paint.

I have used the material ui example (https://github.com/mui-org/material-ui/tree/master/examples/nextjs) and the makeStyles classes work as expected. But, when I generate a next project using the nx nrwl next plugin (https://www.npmjs.com/package/@nrwl/next) and deploy it using nx build -> nx serve --prod it breaks the styling until I navigate to a new page.

It looks like the environment handles the styling different based on the serve type.

I haven't been able to find any information on fixing this issue. Is there a build setting or anything we should be setting? Thanks!

Warning in prod first paint only: Warning: Prop className did not match. Server: "jss1" Client: "HookGlobalStyles-grayTitle-1

Dev - The style selectors and class names match up properly

Dev build screen shot

enter image description here

Prod - The style selectors and class names do not match on first render

Prod build screen shot

enter image description here

1
reactjsmaterial-uinext.jsnrwl-nxnrwl
JSS used by material UI provides a way to define the function used to generate classNames. Provide your own instance of JSS and override this function to use the same generation on server and browser. - Jacob Smit
Providing your own JSS class name generator to MUI - Jacob Smit

1 Answers

1
votes

So, the issue was setting the correct production variable:

We used the cross-env package in our package.json to get it to work:

"prodBuild": "cross-env NODE_ENV=production nx run api-server:build:production", "prodServe": "cross-env NODE_ENV=production nx run api-server:serve:production"