Stepper - does not render correctly with JSS in production with SSR

The Stepper component appears to cause JSS to miscount class names in production, causing the UI to break.

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

Expected Behavior

Stepper renders properly when environment is set to ‘development’.

Current Behavior

Stepper renders improperly when environment is set to ‘production’. It renders a giant black svg circle with the stepper text below (which is now unformatted)

Steps to Reproduce

1. Clone the ssr example from this repository.
2. Create a Stepper component and import into App component (and removed other components).
3. Changed the webpack.config.js mode from mode: process.env.NODE_ENV || 'development', to mode: process.env.NODE_ENV || 'production', and ran it.

Component.js

/*
 * Copyright (c) 2018, Critical Labs LLC
 ******************************************************************************/
import React from 'react';
import PropTypes from 'prop-types';

import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import StepContent from '@material-ui/core/StepContent';

class Component extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      activeStep: 0,
    };
  }

  render() {
    return (
      <div>
        <Stepper orientation="vertical" activeStep={this.state.activeStep}>
          <Step>
            <StepLabel>Test</StepLabel>
            <StepContent>Hello World</StepContent>
          </Step>
        </Stepper>
      </div>
    );
  }
}

export default Component;

App.js

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Component from './Component.js';

const styles = theme => ({
  root: {
    backgroundColor: '#f00',
  },
});

class App extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <Component/>
      </div>
    );
  }
}

App.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(App);

Context

This doesn’t allow me to use the Stepper component in production. I may try to fallback to the v0 Stepper, as it works fine and I’m running both versions in parallel currently.

Your Environment

Tech	Version
Material-UI	1.4.2
React version	16.4.1
Chrome version (build)	67.0.3396.87

[oliviertassinari]

@hluedeke You need to make sure you use the production mode on the server and on the client when doing server-side rendering.

[oliviertassinari]

@hluedeke I would love to see that.