CODEWITHSUNDEEP
reactjsmaterial-uinext.jsnrwl-nxnrwl
Ti83
Ti83

Reputation: 9

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

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

Upvotes: 0

Views: 1035

Answers (1)

Ti83
Ti83

Reputation: 9

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"

Upvotes: 1

Related Questions