[Material-UI] Using custom server in production mode does not attach MUI production classes
See original GitHub issueBug report
Describe the bug
when I was working with Material UI. the development build is working good. but when I was running production build with custom server in next js. It is not rendering the jss class correctly in production mode. It is working correctly when I was doing next build and next start(without custom server).
To Reproduce
Clone Material UI with NextJS example from repo: https://github.com/mui-org/material-ui/tree/master/examples/nextjs
Create custom server.js
const express = require('express');
const next = require('next');
const dev = process.env.NEXT_ENV.trim() !== 'production';
const app = next({ dev });
app
.prepare()
.then(() => {
const server = express();
const handle = app.getRequestHandler();
const port = process.env.PORT || 3000;
server.get('*', (req, res) => handle(req, res));
server.listen(port, err => {
if (err) throw err;
console.log(`Server is running on port ${port}`);
});
})
.catch(ex => {
console.error(ex.stack);
process.exit(1);
});
Run npm script: set NODE_ENV=production && node server.js
Expected behavior
Next js with custom server should load the correct JSS class name in production mode(set NODE_ENV=production && node server.js ).
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
[Material-UI] Using custom server in production mode does not ...
when I was working with Material UI. the development build is working good. but when I was running production build with custom server...
Read more >node.js - Material-UI Rendering Bugs in production / build
The #1 reason this likely happens is due to class name conflicts once your code is in a production bundle. Accoring to Material...
Read more >Frequently Asked Questions - Material UI - MUI
Frequently Asked Questions. Stuck on a particular problem? Check some of these common gotchas first in the FAQ. If you still can't find...
Read more >How to customize - Material UI - MUI
Learn how to customize Material UI components by taking advantage of different strategies for specific use cases.
Read more >CSS in JS - Material-UI
When turned on, the class names will look like this: development: .MuiAppBar-root; production: .MuiAppBar-root. ⚠️ Be cautious when using ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@CalvinSundar
Next and Material-UI (Branch Next) is tested and working with JSS and custom
server.js
withNODE_ENV=production
and no build.To Reproduce:
NODE_ENV=production && node server.js
scriptOutcome:
@CalvinSundar Please provide a visual screenshot from DevTools showing incorrect JSS classes so we can understand if there’s any issues.
@timneutkens The issue seems closable.
@timneutkens You can close the issue:
NEXT_ENV !== NODE_ENV
.Do you plan on having a plugin system? I wish people could install a simple package to make Material-UI works.