Next.js: material-ui CSS styles not applied when running in production mode

Created on 15 Dec 2018  路  3Comments  路  Source: vercel/next.js

Bug report

Describe the bug

Used the material-ui Next.js starter https://github.com/mui-org/material-ui/tree/master/examples/nextjs, and wrote an app.

The app works fine when running with yarn dev, yarn start, and a custom server.js with dev set to true, but when I deploy it using a custom server.js, CSS styles aren't applied when running in production mode (next({dev: false})).

The HTML comes just fine, styled, from the server (for less than a second it looks as it should), but as soon as the client side code executes, the styling goes away. There is nothing in the Console.

To Reproduce

Here's my server.js, which I execute with: yarn build ; node server.js:

```const express = require('express');
const compression = require('compression');
const next = require('next');

const port = parseInt(process.env.PORT, 10) || 3000;

const dev = false;
const app = next({dev});
const handle = app.getRequestHandler();

app.prepare()
.then(() => {
const server = express();
server.get('*', (req, res) => {
return handle(req, res);
});
server.listen(port, (err) => {
if (err) throw err;
console.log(> Ready on http://localhost:${port} Dev? ${dev})
})
});

## Expected behavior
The page should look the same no matter what the value of `dev` is.

## System information
 - OS: Windows 10, Ubuntu
 - Browser Chrome, Firefox, Edge
 - Version of Next.js: `7.0.2`

## Additional context
I searched the existing issues and the closest that matched was [4470](https://github.com/zeit/next.js/issues/4700), but that recommended using the `material-ui` code example, which I'm already doing.

I have a custom `next.config.js` for loading environment variables:

```const Dotenv = require('dotenv-webpack');
const path = require('path');
const dev = process.env.NODE_ENV !== 'production';
module.exports = {
    webpack: (config) => {
        config.plugins.push(new Dotenv({
            path: path.join(__dirname, dev ? '.env.development' : '.env.production'),
            systemvars: true
        }));
        config.resolve.extensions = ['.js', '.jsx'];
        return config
    }
};

Most helpful comment

I'm not entirely sure what's going on here, but the fix is setting NODE_ENV=production, I assume one of the libs checks that 馃 cc @oliviertassinari

All 3 comments

I'm not entirely sure what's going on here, but the fix is setting NODE_ENV=production, I assume one of the libs checks that 馃 cc @oliviertassinari

@timneutkens Yes, we do rely on NODE_ENV=production.

Setting NODE_ENV=production as opposed to simply injecting the boolean value worked.
Thanks, everyone!

Was this page helpful?
0 / 5 - 0 ratings