<p dir="auto">In the <code class="notranslate">material-ui-next</code> example, if you add a subcomponent to the page which uses the <code class="notranslate">withStyles</code> HOC, changing any of the style properties breaks HMR.</p>


<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/zeit/next.js/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">When changing stylesheet properties in a subcomponent that uses the <code class="notranslate">withStyles</code> HOC from Material UI (beta), HMR should work properly.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">When the page hot reloads due to a style change, this error occurs:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Cannot read property 'get' of undefined
TypeError: Cannot read property 'get' of undefined
    at http://localhost:3000/_next/1501726171018/commons.js:49907:49
    at Array.forEach (&lt;anonymous&gt;)
    at ProxyComponent.detach (http://localhost:3000/_next/1501726171018/commons.js:49905:23)
    at ProxyComponent.detach (http://localhost:3000/_next/1501726171018/commons.js:41945:30)
    at ProxyComponent.componentWillUnmount (http://localhost:3000/_next/1501726171018/commons.js:49843:16)
    at ProxyComponent.proxiedComponentWillUnmount (http://localhost:3000/_next/1501726171018/commons.js:41982:43)
    at http://localhost:3000/_next/1501726171018/commons.js:33428:25
    at measureLifeCyclePerf (http://localhost:3000/_next/1501726171018/commons.js:33095:12)
    at ReactCompositeComponentWrapper.unmountComponent (http://localhost:3000/_next/1501726171018/commons.js:33427:11)
    at Object.unmountComponent (http://localhost:3000/_next/1501726171018/commons.js:2501:22)`"><pre class="notranslate"><code class="notranslate">Cannot read property 'get' of undefined
TypeError: Cannot read property 'get' of undefined
    at http://localhost:3000/_next/1501726171018/commons.js:49907:49
    at Array.forEach (&lt;anonymous&gt;)
    at ProxyComponent.detach (http://localhost:3000/_next/1501726171018/commons.js:49905:23)
    at ProxyComponent.detach (http://localhost:3000/_next/1501726171018/commons.js:41945:30)
    at ProxyComponent.componentWillUnmount (http://localhost:3000/_next/1501726171018/commons.js:49843:16)
    at ProxyComponent.proxiedComponentWillUnmount (http://localhost:3000/_next/1501726171018/commons.js:41982:43)
    at http://localhost:3000/_next/1501726171018/commons.js:33428:25
    at measureLifeCyclePerf (http://localhost:3000/_next/1501726171018/commons.js:33095:12)
    at ReactCompositeComponentWrapper.unmountComponent (http://localhost:3000/_next/1501726171018/commons.js:33427:11)
    at Object.unmountComponent (http://localhost:3000/_next/1501726171018/commons.js:2501:22)`
</code></pre></div>
<p dir="auto">This is happening at this line: <a href="https://github.com/callemall/material-ui/blob/v1-beta/src/styles/withStyles.js#L173">https://github.com/callemall/material-ui/blob/v1-beta/src/styles/withStyles.js#L173</a> (<code class="notranslate">sheetManager</code> is undefined)</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Download <a href="https://github.com/sbking/next.js/tree/material-ui-next-hmr-issue/examples/with-material-ui-next">https://github.com/sbking/next.js/tree/material-ui-next-hmr-issue/examples/with-material-ui-next</a></li>
<li><code class="notranslate">npm install &amp;&amp; npm run dev</code></li>
<li>Open in browser, see that text is red.</li>
<li>Change the color to <code class="notranslate">blue</code> in <code class="notranslate">components/StyledText.js</code></li>
<li>HMR fails</li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">Trying to adjust component styles with hot style updates.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>both latest and 3.0.1-beta.20</td>
</tr>
<tr>
<td>node</td>
<td>8.2.1</td>
</tr>
<tr>
<td>OS</td>
<td>OS X (both El Capitan and Sierra)</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome, Firefox, Safari</td>
</tr>
</tbody>
</table>
<p dir="auto">I'm trying to add a custom Social component to my site that adds several relevant meta tags, but it's setting the <code class="notranslate">&lt;title&gt;</code> to an empty string. I have the title defined in <code class="notranslate">_document.js</code> and don't change it anywhere else in the codebase. I'm running the Canary version of Next.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Document, { Head, Main, NextScript } from 'next/document'
export default class CustomDocument extends Document {
  static async getInitialProps (ctx) {
    return await Document.getInitialProps(ctx)
  }

  render () {
    return (
      &lt;html lang=&quot;en&quot;&gt;
        &lt;Head&gt;
          &lt;meta httpEquiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
          &lt;title&gt;Website Title&lt;/title&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    )
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Document</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Head</span><span class="pl-kos">,</span> <span class="pl-v">Main</span><span class="pl-kos">,</span> <span class="pl-v">NextScript</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'next/document'</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">CustomDocument</span> <span class="pl-k">extends</span> <span class="pl-v">Document</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> <span class="pl-k">async</span> <span class="pl-en">getInitialProps</span> <span class="pl-kos">(</span><span class="pl-s1">ctx</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-k">await</span> <span class="pl-v">Document</span><span class="pl-kos">.</span><span class="pl-en">getInitialProps</span><span class="pl-kos">(</span><span class="pl-s1">ctx</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">render</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">html</span> <span class="pl-c1">lang</span><span class="pl-c1">=</span><span class="pl-s">"en"</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">httpEquiv</span><span class="pl-c1">=</span><span class="pl-s">"X-UA-Compatible"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-s">"IE=edge"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"viewport"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-s">"width=device-width, initial-scale=1"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">title</span><span class="pl-c1">&gt;</span>Website Title<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">title</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">body</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Main</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">NextScript</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">body</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">html</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">The custom component I call looks like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Head from 'next/head'

export default ({ title, image, description, url }) =&gt; (
  &lt;Head&gt;
    &lt;meta key=&quot;twitter-card&quot; name=&quot;twitter:card&quot; content=&quot;summary&quot; /&gt;
    &lt;meta key=&quot;twitter-site&quot; name=&quot;twitter:site&quot; content=&quot;@ianmitchel1&quot; /&gt;
    &lt;meta key=&quot;twitter-title&quot; name=&quot;twitter:title&quot; content={title} /&gt;
    &lt;meta key=&quot;twitter-description&quot; name=&quot;twitter:description&quot; content={description} /&gt;
    &lt;meta key=&quot;twitter-image&quot; name=&quot;twitter:image&quot; content={image} /&gt;
    &lt;meta key=&quot;twitter-url&quot; name=&quot;twitter:url&quot; content={url} /&gt;

    &lt;meta key=&quot;facebook-type&quot; property=&quot;og:type&quot; content=&quot;article&quot; /&gt;
    &lt;meta key=&quot;facebook-title&quot; property=&quot;og:title&quot; content={title} /&gt;
    &lt;meta key=&quot;facebook-description&quot; property=&quot;og:description&quot; content={description} /&gt;
    &lt;meta key=&quot;facebook-image&quot; property=&quot;og:image&quot; content={image} /&gt;
    &lt;meta key=&quot;facebook-url&quot; property=&quot;og:url&quot; content={url} /&gt;
  &lt;/Head&gt;
)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Head</span> <span class="pl-k">from</span> <span class="pl-s">'next/head'</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> title<span class="pl-kos">,</span> image<span class="pl-kos">,</span> description<span class="pl-kos">,</span> url <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"twitter-card"</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"twitter:card"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-s">"summary"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"twitter-site"</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"twitter:site"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-s">"@ianmitchel1"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"twitter-title"</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"twitter:title"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">title</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"twitter-description"</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"twitter:description"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">description</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"twitter-image"</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"twitter:image"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">image</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"twitter-url"</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"twitter:url"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">url</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>

    <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"facebook-type"</span> <span class="pl-c1">property</span><span class="pl-c1">=</span><span class="pl-s">"og:type"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-s">"article"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"facebook-title"</span> <span class="pl-c1">property</span><span class="pl-c1">=</span><span class="pl-s">"og:title"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">title</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"facebook-description"</span> <span class="pl-c1">property</span><span class="pl-c1">=</span><span class="pl-s">"og:description"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">description</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"facebook-image"</span> <span class="pl-c1">property</span><span class="pl-c1">=</span><span class="pl-s">"og:image"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">image</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"facebook-url"</span> <span class="pl-c1">property</span><span class="pl-c1">=</span><span class="pl-s">"og:url"</span> <span class="pl-c1">content</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">url</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span></pre></div>
<p dir="auto">It adds all the meta tags correctly (not sure if it's related, but I needed to add the <code class="notranslate">key</code> parameter - otherwise only the second set of meta tags was added) and the other meta tags from <code class="notranslate">_document.js</code> remain intact, but somehow the title tag just becomes <code class="notranslate">&lt;title&gt;&lt;/title&gt;</code>.</p>
<p dir="auto">I've created a small example here - <a href="https://next-title-pnxpfydvvh.now.sh" rel="nofollow">https://next-title-pnxpfydvvh.now.sh</a></p>