<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>


<h2 dir="auto">Current Behavior</h2>


<p dir="auto">I'm struggling to figure out how to duplicate this locally, but I was using <code class="notranslate">3.0.0-beta9</code> and upgraded to <code class="notranslate">4.1</code> (including upgrading to react 16) and now I get this when I use fetch as google or google's page speed test. I narrowed it down to happening sometime between the 3.0 beta and upgrading to next <code class="notranslate">3.2.1</code><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4423173/31737414-6a55bb36-b415-11e7-902e-6e48994f485c.png"><img src="https://user-images.githubusercontent.com/4423173/31737414-6a55bb36-b415-11e7-902e-6e48994f485c.png" alt="screen shot 2017-10-18 at 3 01 43 pm" style="max-width: 100%;"></a></p>
<p dir="auto">I'm worried that it's causing SEO issues. Has anyone else run into this issue?</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Deploy a next site to Netlify at &gt; <code class="notranslate">3.2.1</code></li>
<li>Test that site on Google Page Speed <a href="https://developers.google.com/speed/pagespeed/insights/" rel="nofollow">insights tool</a></li>
</ol>
<h2 dir="auto">Context</h2>


<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>3.2.1</td>
</tr>
<tr>
<td>node</td>
<td>8.4.0</td>
</tr>
<tr>
<td>OS</td>
<td>10.12.6</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">Hi. I've switched to 6.0.0 recently and upgraded <code class="notranslate">next-redux-wrapper</code> to the version <code class="notranslate">2.0.0-beta.2</code>. It assumes using <code class="notranslate">withRedux</code> HOC for the <code class="notranslate">_app.jsx</code> component and <code class="notranslate">react-redux</code>'es <code class="notranslate">connect</code> for pages. Currently this setup breaks hot module replacement, i.e. the console says <code class="notranslate">[HMR] App is up to date</code>, but the page does not update.</p>
<p dir="auto">I know that there are issues with HMR and legacy decorators, so I've used all possible versions:</p>
<h2 dir="auto">1) legacy decorators</h2>
<h3 dir="auto">./pages/index.jsx</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React, { Component } from 'react'
import { connect } from 'react-redux'

@connect()
export default class Landing extends Component {
  render = () =&gt; {
    return (
      &lt;h1&gt;Landing&lt;/h1&gt;
    )
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">connect</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-redux'</span>

@<span class="pl-en">connect</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">Landing</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-c1">render</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</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">h1</span><span class="pl-c1">&gt;</span>Landing<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">2) one-by-one enhancers</h2>
<h3 dir="auto">./pages/index.jsx</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React, { Component } from 'react'
import { connect } from 'react-redux'

class Landing extends Component {
  render = () =&gt; {
    return (
      &lt;h1&gt;Landing&lt;/h1&gt;
    )
  }
}

const ConnectedLanding = connect()(Landing)
export default ConnectedLanding"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">connect</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-redux'</span>

<span class="pl-k">class</span> <span class="pl-v">Landing</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-c1">render</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</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">h1</span><span class="pl-c1">&gt;</span>Landing<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-v">ConnectedLanding</span> <span class="pl-c1">=</span> <span class="pl-en">connect</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-v">Landing</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">ConnectedLanding</span></pre></div>
<h2 dir="auto">3) separate files for components and pages</h2>
<h3 dir="auto">./components/pages/index.jsx</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React, { Component } from 'react'

export default class Landing extends Component {
  render = () =&gt; {
    return (
      &lt;h1&gt;Landing&lt;/h1&gt;
    )
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">Landing</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-c1">render</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</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">h1</span><span class="pl-c1">&gt;</span>Landing<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">./pages/index.jsx</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { connect } from 'react-redux'
import Page from '../components/pages/index'

const ConnectedPage = connect()(Page)
export default ConnectedPage"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">connect</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-redux'</span>
<span class="pl-k">import</span> <span class="pl-v">Page</span> <span class="pl-k">from</span> <span class="pl-s">'../components/pages/index'</span>

<span class="pl-k">const</span> <span class="pl-v">ConnectedPage</span> <span class="pl-c1">=</span> <span class="pl-en">connect</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-v">Page</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">ConnectedPage</span></pre></div>
<p dir="auto">But none of these solutions work. Also, I've tried using both regular <code class="notranslate">redux</code> and <code class="notranslate">fast-redux</code>, no change. Rest of the config looks like this:</p>
<h3 dir="auto">./decorators/redux-app.jsx</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import withRedux from 'next-redux-wrapper'
import { rootReducer } from 'fast-redux'

let composeEnhancers

if (process.env.NODE_ENV !== 'production') {
  composeEnhancers = (typeof window !== 'undefined' &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose
}

if (process.env.NODE_ENV === 'production') {
  composeEnhancers = compose
}

const makeStore = initialState =&gt; createStore(
  rootReducer,
  initialState,
  composeEnhancers(applyMiddleware(thunk))
)

const reduxApp = Component =&gt; withRedux(makeStore)(Component)

export default reduxApp"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">createStore</span><span class="pl-kos">,</span> <span class="pl-s1">applyMiddleware</span><span class="pl-kos">,</span> <span class="pl-s1">compose</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'redux'</span>
<span class="pl-k">import</span> <span class="pl-s1">thunk</span> <span class="pl-k">from</span> <span class="pl-s">'redux-thunk'</span>
<span class="pl-k">import</span> <span class="pl-s1">withRedux</span> <span class="pl-k">from</span> <span class="pl-s">'next-redux-wrapper'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">rootReducer</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'fast-redux'</span>

<span class="pl-k">let</span> <span class="pl-s1">composeEnhancers</span>

<span class="pl-k">if</span> <span class="pl-kos">(</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-kos">{</span>
  <span class="pl-s1">composeEnhancers</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-smi">window</span> <span class="pl-c1">!==</span> <span class="pl-s">'undefined'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">__REDUX_DEVTOOLS_EXTENSION_COMPOSE__</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-s1">compose</span>
<span class="pl-kos">}</span>

<span class="pl-k">if</span> <span class="pl-kos">(</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-kos">{</span>
  <span class="pl-s1">composeEnhancers</span> <span class="pl-c1">=</span> <span class="pl-s1">compose</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-en">makeStore</span> <span class="pl-c1">=</span> <span class="pl-s1">initialState</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">createStore</span><span class="pl-kos">(</span>
  <span class="pl-s1">rootReducer</span><span class="pl-kos">,</span>
  <span class="pl-s1">initialState</span><span class="pl-kos">,</span>
  <span class="pl-s1">composeEnhancers</span><span class="pl-kos">(</span><span class="pl-en">applyMiddleware</span><span class="pl-kos">(</span><span class="pl-s1">thunk</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-kos">)</span>

<span class="pl-k">const</span> <span class="pl-en">reduxApp</span> <span class="pl-c1">=</span> <span class="pl-v">Component</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">withRedux</span><span class="pl-kos">(</span><span class="pl-en">makeStore</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-v">Component</span><span class="pl-kos">)</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">reduxApp</span></pre></div>
<h3 dir="auto">./pages/_app.jsx</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react'
import App, { Container } from 'next/app'
import reduxApp from '../decorators/redux-app'

class CustomApp extends App {
  static getInitialProps = async ({ Component, router, ctx }) =&gt; {
    const pageProps = typeof Component.getInitialProps === 'function'
      ? await Component.getInitialProps(ctx)
      : {}

    return {
      pageProps
    }
  }

  render = () =&gt; {
    const { Component, pageProps } = this.props

    return (
      &lt;Container&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/Container&gt;
    )
  }
}

const ReduxedApp = reduxApp(CustomApp)
export default ReduxedApp"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-v">App</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Container</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'next/app'</span>
<span class="pl-k">import</span> <span class="pl-s1">reduxApp</span> <span class="pl-k">from</span> <span class="pl-s">'../decorators/redux-app'</span>

<span class="pl-k">class</span> <span class="pl-v">CustomApp</span> <span class="pl-k">extends</span> <span class="pl-v">App</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> <span class="pl-c1">getInitialProps</span> <span class="pl-c1">=</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> Component<span class="pl-kos">,</span> router<span class="pl-kos">,</span> ctx <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">pageProps</span> <span class="pl-c1">=</span> <span class="pl-k">typeof</span> <span class="pl-v">Component</span><span class="pl-kos">.</span><span class="pl-c1">getInitialProps</span> <span class="pl-c1">===</span> <span class="pl-s">'function'</span>
      ? <span class="pl-k">await</span> <span class="pl-v">Component</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-kos">}</span>

    <span class="pl-k">return</span> <span class="pl-kos">{</span>
      pageProps
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>

  <span class="pl-c1">render</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> Component<span class="pl-kos">,</span> pageProps <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span>

    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Container</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Component</span> <span class="pl-kos">{</span>...<span class="pl-s1">pageProps</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">Container</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-v">ReduxedApp</span> <span class="pl-c1">=</span> <span class="pl-en">reduxApp</span><span class="pl-kos">(</span><span class="pl-v">CustomApp</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">ReduxedApp</span></pre></div>



<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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">Hot updates are properly applied on change.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">No hot updates are applied, despite the fact that the console says something like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[HMR] connected
[HMR] bundle rebuilding
[HMR] bundle rebuilt in 453ms
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./components/pages/index.jsx
[HMR]  - ./pages/index.jsx
[HMR] App is up to date.
[HMR] bundle rebuilding
[HMR] bundle rebuilt in 570ms"><pre class="notranslate"><code class="notranslate">[HMR] connected
[HMR] bundle rebuilding
[HMR] bundle rebuilt in 453ms
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./components/pages/index.jsx
[HMR]  - ./pages/index.jsx
[HMR] App is up to date.
[HMR] bundle rebuilding
[HMR] bundle rebuilt in 570ms
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Upgrade to <code class="notranslate">next 6.0.0</code> and <code class="notranslate">next-redux-wrapper 2.0.0-beta.2</code></li>
<li>Try to use HMR in <code class="notranslate">connect</code>'ed pages</li>
</ol>
<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>6.0.0</td>
</tr>
<tr>
<td>node</td>
<td>9.11.1</td>
</tr>
<tr>
<td><a class="issue-link js-issue-link notranslate" rel="noopener noreferrer nofollow" href="https://linear.app/vercel/issue/NEXT-redux-wrapper">next-redux-wrapper</a></td>
<td>2.0.0-beta.2</td>
</tr>
<tr>
<td>redux</td>
<td>4.0.0</td>
</tr>
<tr>
<td>react-redux</td>
<td>5.0.7</td>
</tr>
</tbody>
</table>