<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">The <code class="notranslate">Component</code> prop provided in <code class="notranslate">_app.tsx</code> is not properly rendered upon page change.</p>
<h2 dir="auto">In details</h2>
<p dir="auto">I'm creating a React application and I'm using next to do some SSR. I'm also using redux and redux-saga, and I have asynchronous logics that update the status of the application. To ease things down, let's say I have a status field in my redux store that is initialized when the app starts.</p>
<p dir="auto">I have a component I call StatusGate, that takes the main page component as children and renders it if the status field in the redux store is good. I had to disable ssr for this component as the status was different on client and server side, giving me a render error.</p>
<p dir="auto">This is basically what I do in the _app.tsx render:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// Load the redux store, extract Component and pageProps from props

return &lt;Container&gt;
         &lt;Provider store={store}&gt;
           &lt;NavBar&gt;
             &lt;StatusGate&gt;
               &lt;Component {...pageProps}/&gt;
             &lt;/StatusGate&gt;
           &lt;/NavBar&gt;
         &lt;/Provider&gt;
       &lt;/Container&gt;;"><pre class="notranslate"><code class="notranslate">// Load the redux store, extract Component and pageProps from props

return &lt;Container&gt;
         &lt;Provider store={store}&gt;
           &lt;NavBar&gt;
             &lt;StatusGate&gt;
               &lt;Component {...pageProps}/&gt;
             &lt;/StatusGate&gt;
           &lt;/NavBar&gt;
         &lt;/Provider&gt;
       &lt;/Container&gt;;
</code></pre></div>
<p dir="auto">And in the NavBar I have a Link imported from next, that brings me to the /account page. When the link is clicked, the url is properly updated, but the content rendered by Component is not.</p>
<p dir="auto">What I found very weird is the following scenario</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// Load the redux store, extract Component and pageProps from props

return &lt;Container&gt;
         &lt;Provider store={store}&gt;
           &lt;NavBar&gt;
             &lt;Component {...pageProps}/&gt;
             &lt;StatusGate&gt;
               &lt;Component {...pageProps}/&gt;
             &lt;/StatusGate&gt;
           &lt;/NavBar&gt;
         &lt;/Provider&gt;
       &lt;/Container&gt;;"><pre class="notranslate"><code class="notranslate">// Load the redux store, extract Component and pageProps from props

return &lt;Container&gt;
         &lt;Provider store={store}&gt;
           &lt;NavBar&gt;
             &lt;Component {...pageProps}/&gt;
             &lt;StatusGate&gt;
               &lt;Component {...pageProps}/&gt;
             &lt;/StatusGate&gt;
           &lt;/NavBar&gt;
         &lt;/Provider&gt;
       &lt;/Container&gt;;
</code></pre></div>
<p dir="auto">Here I render this Component twice, once just before the gate, and the second one just like before. Now the content of the first one is properly updated when I follow a Link, and the second is still not updated.</p>
<p dir="auto">This is the Gate component: <a href="https://github.com/ticket721/web-app/blob/feature/ENV-3.event-admin/components/gate/Gate.tsx">https://github.com/ticket721/web-app/blob/feature/ENV-3.event-admin/components/gate/Gate.tsx</a></p>
<p dir="auto">And this is one usage example: <a href="https://github.com/ticket721/web-app/blob/feature%2FENV-3.event-admin/web_components/appgate/AppGate.tsx">https://github.com/ticket721/web-app/blob/feature%2FENV-3.event-admin/web_components/appgate/AppGate.tsx</a></p>
<p dir="auto">In my case I have more than one Gate, and I also noticed that only the first one of the tree of Gates has its render method called, and I'm 100% sure its children are getting returned properly by the render.</p>
<p dir="auto">I'm using next with Typescript, Css and Less.</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Wherever the position of <code class="notranslate">Component</code>, it should properly get rerendered.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOs</li>
<li>Browser (if applies): Chrome</li>
<li>Version of Next.js: 8.0.4</li>
</ul>
<p dir="auto">I'm trying move .jsx components looks like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class Header extends React.Component {
  constructor(props) {
............................................
}
render() {
    return 
    (
    &lt;div className=&quot;nav-container&quot;&gt;
      &lt;a id=&quot;top&quot;&gt;&lt;/a&gt;
        &lt;nav&gt;
          &lt;div className=&quot;nav-utility&quot;&gt;
            &lt;div className=&quot;module left&quot;&gt;
 ..........................)"><pre class="notranslate"><code class="notranslate">class Header extends React.Component {
  constructor(props) {
............................................
}
render() {
    return 
    (
    &lt;div className="nav-container"&gt;
      &lt;a id="top"&gt;&lt;/a&gt;
        &lt;nav&gt;
          &lt;div className="nav-utility"&gt;
            &lt;div className="module left"&gt;
 ..........................)
</code></pre></div>
<p dir="auto">from production ready CreateReactApp to new next.js project and once faced with module parse fail:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Module parse failed: /home/orloff/projects/dst-next/src/app/components/layout/header.jsx Unexpected token (40:6)
You may need an appropriate loader to handle this file type.
| render() {
|     return
|     ( &lt;div&gt;Header&lt;/div&gt;
|   //   &lt;div className=&quot;nav-container&quot;&gt;
|   //     &lt;a id=&quot;top&quot;&gt;&lt;/a&gt;

 @ ./components/App.js 11:14-44
 @ ./pages?entry
 @ multi ./pages?entry"><pre class="notranslate"><code class="notranslate">Module parse failed: /home/orloff/projects/dst-next/src/app/components/layout/header.jsx Unexpected token (40:6)
You may need an appropriate loader to handle this file type.
| render() {
|     return
|     ( &lt;div&gt;Header&lt;/div&gt;
|   //   &lt;div className="nav-container"&gt;
|   //     &lt;a id="top"&gt;&lt;/a&gt;

 @ ./components/App.js 11:14-44
 @ ./pages?entry
 @ multi ./pages?entry
</code></pre></div>
<p dir="auto">what is correct way solve it?</p>