<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Because of changes in React 16, server-side rendering no longer behaves any differently in production mode than in any other environment. Libraries such as Next.js configure Webpack to compile client code in production mode. Many users need to run multiple different environments with different configurations. For example, a staging environment might need to run a production build of the app but it's NODE_ENV might be 'staging'. If this is the case, the server will always render long classnames while the client will always expect short classnames.</p>
<p dir="auto">In Next.js, this causes the initial render to break but every subsequent render to work correctly. After tracking this bug throughout my entire stack, I determined that it comes from material-ui's configuration approach.</p>
<p dir="auto">Rather than requiring the user to set process.env.NODE_ENV to production, allow the user to pass some kind of configuration variable that would trigger <code class="notranslate">createGenerateClassName.js</code> to operate in "production mode".</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.12</td>
</tr>
<tr>
<td>React</td>
<td>16.0</td>
</tr>
<tr>
<td>browser</td>
<td>all</td>
</tr>
<tr>
<td>etc</td>
<td>Next.js 4.0-beta.2</td>
</tr>
</tbody>
</table>
<h3 dir="auto">Problem description</h3>
<p dir="auto">With the recent change to flow 0.53, we encountered a small but perhaps unnecessary size increase.  There are two sources of this:</p>
<ol dir="auto">
<li>the conditional check for <code class="notranslate">typeof</code> seems quite long</li>
<li>there are two assignments to propTypes</li>
</ol>
<p dir="auto">This was occurring before the PR <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="252129897" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/7869" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/7869/hovercard" href="https://github.com/mui/material-ui/pull/7869">#7869</a> as verified in the build package, but I assume the long <code class="notranslate">typeof</code> check pushed us up and over that limit.</p>
<p dir="auto">This could be a bug in the plugin, or it could be a quirk with our usage.</p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li><code class="notranslate">yarn build</code></li>
<li>open <code class="notranslate">RadioGroup.js</code></li>
<li>look at the bottom to find</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="RadioGroup.propTypes = process.env.NODE_ENV !== &quot;production&quot; ? (_ref2 = {
  classes: require('prop-types').object.isRequired,
  children: typeof (React.ChildrenArray == null ? {} : React.ChildrenArray) === 'function' ? require('prop-types').instanceOf(React.ChildrenArray == null ? {} : React.ChildrenArray) : require('prop-types').any
}, (0, _defineProperty3.default)(_ref2, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref2, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref2, 'name', require('prop-types').string), (0, _defineProperty3.default)(_ref2, 'onBlur', require('prop-types').func), (0, _defineProperty3.default)(_ref2, 'onChange', require('prop-types').func), (0, _defineProperty3.default)(_ref2, 'onKeyDown', require('prop-types').func), (0, _defineProperty3.default)(_ref2, 'value', require('prop-types').string.isRequired), _ref2) : {};
RadioGroup.propTypes = process.env.NODE_ENV !== &quot;production&quot; ? (_ref3 = {
  classes: require('prop-types').object.isRequired,
  children: typeof (React.ChildrenArray == null ? {} : React.ChildrenArray) === 'function' ? require('prop-types').instanceOf(React.ChildrenArray == null ? {} : React.ChildrenArray) : require('prop-types').any
}, (0, _defineProperty3.default)(_ref3, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref3, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref3, 'name', require('prop-types').string), (0, _defineProperty3.default)(_ref3, 'onBlur', require('prop-types').func), (0, _defineProperty3.default)(_ref3, 'onChange', require('prop-types').func), (0, _defineProperty3.default)(_ref3, 'onKeyDown', require('prop-types').func), (0, _defineProperty3.default)(_ref3, 'value', require('prop-types').string.isRequired), _ref3) : {};"><pre class="notranslate"><span class="pl-v">RadioGroup</span><span class="pl-kos">.</span><span class="pl-c1">propTypes</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">NODE_ENV</span> <span class="pl-c1">!==</span> <span class="pl-s">"production"</span> ? <span class="pl-kos">(</span><span class="pl-s1">_ref2</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">classes</span>: <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">object</span><span class="pl-kos">.</span><span class="pl-c1">isRequired</span><span class="pl-kos">,</span>
  <span class="pl-c1">children</span>: <span class="pl-k">typeof</span> <span class="pl-kos">(</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">ChildrenArray</span> <span class="pl-c1">==</span> <span class="pl-c1">null</span> ? <span class="pl-kos">{</span><span class="pl-kos">}</span> : <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">ChildrenArray</span><span class="pl-kos">)</span> <span class="pl-c1">===</span> <span class="pl-s">'function'</span> ? <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">instanceOf</span><span class="pl-kos">(</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">ChildrenArray</span> <span class="pl-c1">==</span> <span class="pl-c1">null</span> ? <span class="pl-kos">{</span><span class="pl-kos">}</span> : <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">ChildrenArray</span><span class="pl-kos">)</span> : <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">any</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref2</span><span class="pl-kos">,</span> <span class="pl-s">'classes'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">object</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref2</span><span class="pl-kos">,</span> <span class="pl-s">'className'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">string</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref2</span><span class="pl-kos">,</span> <span class="pl-s">'name'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">string</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref2</span><span class="pl-kos">,</span> <span class="pl-s">'onBlur'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">func</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref2</span><span class="pl-kos">,</span> <span class="pl-s">'onChange'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">func</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref2</span><span class="pl-kos">,</span> <span class="pl-s">'onKeyDown'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">func</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref2</span><span class="pl-kos">,</span> <span class="pl-s">'value'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">string</span><span class="pl-kos">.</span><span class="pl-c1">isRequired</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">_ref2</span><span class="pl-kos">)</span> : <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-v">RadioGroup</span><span class="pl-kos">.</span><span class="pl-c1">propTypes</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">NODE_ENV</span> <span class="pl-c1">!==</span> <span class="pl-s">"production"</span> ? <span class="pl-kos">(</span><span class="pl-s1">_ref3</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">classes</span>: <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">object</span><span class="pl-kos">.</span><span class="pl-c1">isRequired</span><span class="pl-kos">,</span>
  <span class="pl-c1">children</span>: <span class="pl-k">typeof</span> <span class="pl-kos">(</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">ChildrenArray</span> <span class="pl-c1">==</span> <span class="pl-c1">null</span> ? <span class="pl-kos">{</span><span class="pl-kos">}</span> : <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">ChildrenArray</span><span class="pl-kos">)</span> <span class="pl-c1">===</span> <span class="pl-s">'function'</span> ? <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">instanceOf</span><span class="pl-kos">(</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">ChildrenArray</span> <span class="pl-c1">==</span> <span class="pl-c1">null</span> ? <span class="pl-kos">{</span><span class="pl-kos">}</span> : <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">ChildrenArray</span><span class="pl-kos">)</span> : <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">any</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref3</span><span class="pl-kos">,</span> <span class="pl-s">'classes'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">object</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref3</span><span class="pl-kos">,</span> <span class="pl-s">'className'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">string</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref3</span><span class="pl-kos">,</span> <span class="pl-s">'name'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">string</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref3</span><span class="pl-kos">,</span> <span class="pl-s">'onBlur'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">func</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref3</span><span class="pl-kos">,</span> <span class="pl-s">'onChange'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">func</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref3</span><span class="pl-kos">,</span> <span class="pl-s">'onKeyDown'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">func</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s1">_defineProperty3</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">_ref3</span><span class="pl-kos">,</span> <span class="pl-s">'value'</span><span class="pl-kos">,</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'prop-types'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">string</span><span class="pl-kos">.</span><span class="pl-c1">isRequired</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">_ref3</span><span class="pl-kos">)</span> : <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>