question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Styles not added on client side in production mode

See original GitHub issue

So, whenever I am running my app in development mode, everything is fine, but the moment I switch to production, the styles are sent from the server, but when the styles are removed on the client side, they don’t appear to be added back in. Although the new classes are added to the head section, the classnames are not updated on the actual DOM, which means the styles are not applied. Everything else works, but the styles just are not updated for some reason. I followed the instructions on https://material-ui.com/guides/server-rendering/ exactly, and everything works fine unless I change the mode to production.

capture

  • This is a v1.x issue.
  • [* ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Styles display correctly

Current Behavior

Styles display incorrectly

Steps to Reproduce

clone https://gitlab.com/zwhitchcox/aworth

git pull mui-bug && git checkout mui-bug (I think, just the branch is mui-bug) run make dev-build && make dev-up (must have docker installed)

Context

I’m trying to make it so styles show up properly in my app

Your Environment

Tech Version
"@material-ui/core": "^1.4.0",
"@material-ui/icons": "^1.1.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",

browser: chrome

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:17

github_iconTop GitHub Comments

3reactions
support[bot]commented, Aug 15, 2018

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however, this issue appears to be a support request or question. Please ask on StackOverflow where the community will do their best to help. There is a “material-ui” tag that you can use to tag your question.

If you would like to link from here to your question on SO, it will help others find it. If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

0reactions
Ti84commented, Oct 30, 2020

@morgoe 9 months late, but for future we were able to get it working using the cross-env package in our package.json: “prodBuild”: “cross-env NODE_ENV=production nx run example-app:build:production”, “prodServe”: “cross-env NODE_ENV=production nx run example-app:serve:production”

Should work with the next build too I think. We just ran into the issue with nx specifically.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Styles not added on client side in production mode #12526
So, whenever I am running my app in development mode, everything is fine, but the moment I switch to production, the styles are...
Read more >
Material-UI have different style result in production mode?
In dev env all stylesheets created by makeStyles() were injected after ALL MUI stylesheets, but in production they were mixed. Solution: Add ......
Read more >
Solving the React Error: Not Picking Up CSS Style | Pluralsight
In this guide, you will learn about the errors that can occur while importing a CSS file into your React file.
Read more >
Next.js and Styled-Components: style loading issue
js app but can't get the styles to load properly? This is because the server-side rendering does not fetch the styles before rendering...
Read more >
Client side extension imported css via webpack css loader is ...
I have tried packaging (via atlas-package) the plugin and uploaded it on my bitbucket server instance, using the Devtools on chrome as suggested ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found