SSR example is not working on production build

[frenkelor]

SSR example is not working while running NODE_ENV=production npm start

I'm having the same issue on my production build

Warning: Prop className did not match. Server: "jss15 jss19 jss32" Client: "MuiTypography-root-15 MuiTypography-display1-19 MuiTypography-gutterBottom-32"

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Server and client will render without braking the ui

Current Behavior

client-side rendering brakes the ui

Steps to Reproduce (for bugs)

1. Clone the source code
2. Move to the examples SSR folder
3. run npm install
4. run NODE_ENV=production npm start

[oliviertassinari]

Check out https://github.com/mui-org/material-ui/tree/master/examples/ssr. This is the reference implementation of the Server Rendering tutorial.

[frenkelor]

This is the issue this example is not working @oliviertassinari

[oliviertassinari]

@frenkelor The demo doesn't mean to demonstrate how to configure the production env, but sure, why not. Do you want to submit a pull request with the following change?

/examples/ssr/webpack.config.js

const path = require('path');

module.exports = {
  entry: './client.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/',
  },
+ mode: process.env.NODE_ENV || 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
};

Thanks

[bobbyhadz]

the above change did not solve this issue for me, once the client side takes over material ui does not initialize. An example: https://www.borislav.win/

[frenkelor]

yes you are right @opmftw you need to change the npm start command too:
"start": "webpack -w --mode=production & nodemon --exec yarn babel-node -- server.js"

[frenkelor]

#12080 @oliviertassinari

[oliviertassinari]

@frenkelor Perfect 👌