<ul dir="auto">
<li>[x ] I have searched the <a href="https://github.com/mui-org/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">NextJS sample application should load without any issue.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">v1.0.0-beta.28 broke something in theming. My code still works fine with v1.0.0-beta.27. Getting the following error in v1.0.0-beta.28<br>
TypeError: Cannot read property 'charAt' of undefined<br>
at decomposeColor (/user_code/node_modules/material-ui/styles/colorManipulator.js:80:12)<br>
at lighten (/user_code/node_modules/material-ui/styles/colorManipulator.js:226:11)<br>
at createPalette (/user_code/node_modules/material-ui/styles/createPalette.js:144:51)<br>
at createMuiTheme (/user_code/node_modules/material-ui/styles/createMuiTheme.js:71:45)<br>
at Object. (/user_code/next/dist/components/getPageContext.js:31:40)<br>
at Module._compile (module.js:570:32)<br>
at Object.Module._extensions..js (module.js:579:10)<br>
at Module.load (module.js:487:32)<br>
at tryModuleLoad (module.js:446:12)<br>
at Function.Module._load (module.js:438:3)</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Run the sample NextJS app with v1.0.0-beta.28 and v1.0.0-beta.27. In v1.0.0-beta.28, you'll get the above error.</p>
<h2 dir="auto">Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
</table>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" &quot;next&quot;: &quot;^4.2.1&quot;,
&quot;react&quot;: &quot;^16.2.0&quot;,
&quot;react-dom&quot;: &quot;^16.2.0&quot;,
&quot;material-ui&quot;: &quot;v1.0.0-beta.28&quot;,"><pre class="notranslate"><code class="notranslate"> "next": "^4.2.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"material-ui": "v1.0.0-beta.28",
</code></pre></div>
<p dir="auto">I am using the latest  "v1.0.0-beta.20".</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const theme = createMuiTheme({
  palette: {
    primary: grey[100],
    secondary: blue['A400']
  },
});
"><pre class="notranslate"><code class="notranslate">const theme = createMuiTheme({
  palette: {
    primary: grey[100],
    secondary: blue['A400']
  },
});

</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TypeError: Cannot read property 'charAt' of undefined
decomposeColor
node_modules/material-ui/styles/colorManipulator.js:106
  103 |  * @returns {{type: string, values: number[]}} A MUI color object
  104 |  */
  105 | function decomposeColor(color) {
&gt; 106 |   if (color.charAt(0) === '#') {
  107 |     return decomposeColor(convertHexToRGB(color));
  108 |   }
  109 | "><pre class="notranslate"><code class="notranslate">TypeError: Cannot read property 'charAt' of undefined
decomposeColor
node_modules/material-ui/styles/colorManipulator.js:106
  103 |  * @returns {{type: string, values: number[]}} A MUI color object
  104 |  */
  105 | function decomposeColor(color) {
&gt; 106 |   if (color.charAt(0) === '#') {
  107 |     return decomposeColor(convertHexToRGB(color));
  108 |   }
  109 | 
</code></pre></div>
<p dir="auto">where as this works, Any idea whats happening here ?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const theme = createMuiTheme({
  palette: {
    primary: grey,
    secondary: blue
  },
});
"><pre class="notranslate"><code class="notranslate">const theme = createMuiTheme({
  palette: {
    primary: grey,
    secondary: blue
  },
});

</code></pre></div>