<p dir="auto">Following <code class="notranslate">https://github.com/zeit/next.js/tree/v3-beta/examples/with-styled-components</code></p>
<p dir="auto">Then I get this error when launching<br>
<code class="notranslate">Nesting detected at 1:757. Unfortunately nesting is not supported by styled-jsx.</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="500
Internal Server Error.
Nesting detected at 1:757. Unfortunately nesting is not supported by styled-jsx.
Error: Nesting detected at 1:757. Unfortunately nesting is not supported by styled-jsx.
    at Function.disableNestingPlugin (/node_modules/styled-jsx/dist/lib/style-transform.js:19:13)
    at proxy (/node_modules/stylis/stylis.js:1133:30)
    at compile (/node_modules/stylis/stylis.js:679:10)
    at compile (/node_modules/stylis/stylis.js:319:17)
    at stylis (/node_modules/stylis/stylis.js:1270:16)
    at stringifyRules (/node_modules/styled-components/lib/utils/stringifyRules.js:27:31)
    at ComponentStyle.generateAndInjectStyles (/node_modules/styled-components/lib/models/ComponentStyle.js:59:24)
    at StyledComponent.generateAndInjectStyles (/node_modules/styled-components/lib/models/StyledComponent.js:121:38)
    at StyledComponent.componentWillMount (/node_modules/styled-components/lib/models/StyledComponent.js:150:39)"><pre class="notranslate"><code class="notranslate">500
Internal Server Error.
Nesting detected at 1:757. Unfortunately nesting is not supported by styled-jsx.
Error: Nesting detected at 1:757. Unfortunately nesting is not supported by styled-jsx.
    at Function.disableNestingPlugin (/node_modules/styled-jsx/dist/lib/style-transform.js:19:13)
    at proxy (/node_modules/stylis/stylis.js:1133:30)
    at compile (/node_modules/stylis/stylis.js:679:10)
    at compile (/node_modules/stylis/stylis.js:319:17)
    at stylis (/node_modules/stylis/stylis.js:1270:16)
    at stringifyRules (/node_modules/styled-components/lib/utils/stringifyRules.js:27:31)
    at ComponentStyle.generateAndInjectStyles (/node_modules/styled-components/lib/models/ComponentStyle.js:59:24)
    at StyledComponent.generateAndInjectStyles (/node_modules/styled-components/lib/models/StyledComponent.js:121:38)
    at StyledComponent.componentWillMount (/node_modules/styled-components/lib/models/StyledComponent.js:150:39)
</code></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">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">I'm playing with next 3.2.2 and am quite enjoying its simplicity and the plentifulness of examples. Awesome experience, even compared with other boilerplates I've used before!</p>
<p dir="auto">After building a simple demo website based on the <a href="https://github.com/zeit/next.js/tree/master/examples/with-apollo"><code class="notranslate">with-apollo</code></a> example, I noticed a behaviour previously mentioned in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="226570050" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/1888" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/1888/hovercard" href="https://github.com/vercel/next.js/issues/1888">#1888</a>/<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="236740682" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2305" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2305/hovercard" href="https://github.com/vercel/next.js/issues/2305">#2305</a> and fixed in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="239993362" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2437" data-hovercard-type="pull_request" data-hovercard-url="/vercel/next.js/pull/2437/hovercard" href="https://github.com/vercel/next.js/pull/2437">#2437</a>.</p>
<h2 dir="auto">Expected vs Current Behavior</h2>
<p dir="auto">My sandbox project has got three pages: <code class="notranslate">index</code>, <code class="notranslate">about</code> and <code class="notranslate">_error</code>, all wrapped into <code class="notranslate">withData</code> HOC that helps init and reuse the apollo client. There is also a custom <code class="notranslate">_document</code> page that enables <a href="https://github.com/zeit/next.js/tree/master/examples/with-react-intl">i18n</a> and <a href="https://github.com/zeit/next.js/tree/master/examples/with-styled-components">styled-components</a>. When I navigate between <code class="notranslate">index</code> and <code class="notranslate">about</code>, GraphQL cache persists and so there is no <code class="notranslate">loading...</code> message showing up after the data has been loaded for the first time (no matter if on the server or on the client). However, when visit a 404 page and then return to an existing page, the redux cache appears to be reset and so apollo does the data fetching again. Also when I click on a link that leads to a 404 error, Chrome's history of network requests wipes out, thus suggesting that the 404 page shows up after a full reload.</p>
<p dir="auto"><s>I deployed a built version of my experiment to <a href="https://example.com/" rel="nofollow">https://example.com/</a>, but this URI is likely to be deleted or replaced in a few days. Quite an ugly demo, but should be enough to reproduce what I mean.</s> The sources are in a private gitlab repo, but I can upload them to github if necessary.</p>
<p dir="auto">How could I avoid this refresh behaviour and thus provide future users with a smoother UX?</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>3.2.2</td>
</tr>
<tr>
<td>node</td>
<td>8.5.0</td>
</tr>
<tr>
<td>OS</td>
<td>macos / alpine linux (docker)</td>
</tr>
<tr>
<td>browser</td>
<td>latest chrome</td>
</tr>
</tbody>
</table>