<ul dir="auto">
<li>[x ] 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">My page contains this very basic code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react'
import styled from 'styled-components'

const Title = styled.h1`
  color: pink;
  font-size: 50px;
`

export default () =&gt; &lt;Title&gt;My page&lt;/Title&gt;"><pre class="notranslate"><code class="notranslate">import React from 'react'
import styled from 'styled-components'

const Title = styled.h1`
  color: pink;
  font-size: 50px;
`

export default () =&gt; &lt;Title&gt;My page&lt;/Title&gt;
</code></pre></div>
<p dir="auto">When I refresh the page, I expect the Title to be of color pink</p>

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

<p dir="auto">The first time the page is built, the title does appear as pink. When I refresh the page, the pink color is no longer respected.<br>
If I change the color in the code to anything else, and save the file, then the page will update. But again, upon refreshing, the changes are lost again. I have no clue what might be causing this. Any help is appreciated.</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>latest</td>
</tr>
<tr>
<td>node</td>
<td></td>
</tr>
<tr>
<td>OS</td>
<td>arch</td>
</tr>
<tr>
<td>browser</td>
<td>vivaldi</td>
</tr>
</tbody>
</table>
<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">In production, enabling <code class="notranslate">devtool</code> and tweaking the <code class="notranslate">UglifyJSPlugin</code> configuration should build a full source map that can e.g. be used by the browser or external services to map stack traces back to original source files.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">In Next.js v5.0.0, source maps are generated for <code class="notranslate">common.js</code>, <code class="notranslate">manifest.js</code> and <code class="notranslate">react.js</code> in the Next.js build directory,  but not for <code class="notranslate">app.js</code> (see <em>context</em> below for the gory details).</p>
<p dir="auto">I haven't checked <code class="notranslate">canary</code> yet to see if the problem has been fixed, but from a casual inspection of the changes since <code class="notranslate">5.0.0</code>, I would expect to still have the same problem.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">(I've copied the following from an internal discussion about this, apologies if any of it is unclear)</p>
<p dir="auto">Next 5.0.0 by default will not correctly build source maps for<br>
production. The client-code build process is:</p>
<ol dir="auto">
<li>
<p dir="auto">List app pages and <code class="notranslate">main.js</code> as Webpack <em>entry points</em>. <code class="notranslate">main.js</code><br>
points to <code class="notranslate">node_modules/next/dist/client/next.js</code> (and pages point<br>
to the indivdual file in <code class="notranslate">pages/</code> <a href="https://github.com/zeit/next.js/blob/9cfea69ab148b21300b7294fb14aea824b314873/server/build/webpack.js#L117-L132">1</a></p>
</li>
<li>
<p dir="auto">Use <code class="notranslate">CommonsChunkPlugin</code> to: a) extract common code from pages into<br>
<code class="notranslate">common.js</code>, b) provide a single implementation of React, and c)<br>
extract the webpack setup code. <a href="https://github.com/zeit/next.js/blob/9cfea69ab148b21300b7294fb14aea824b314873/server/build/webpack.js#L259-L312">2</a></p>
</li>
<li>
<p dir="auto">Use UglifyJS to minify code.</p>
</li>
<li>
<p dir="auto">Use custom <code class="notranslate">CombineAssetsPlugin</code> <a href="https://github.com/zeit/next.js/blob/9cfea69ab148b21300b7294fb14aea824b314873/server/build/plugins/combine-assets-plugin.js">3</a> to hand-merge the common<br>
chunks from step 2, with <code class="notranslate">main.js</code>, into <code class="notranslate">app.js</code>. <a href="https://github.com/zeit/next.js/blob/9cfea69ab148b21300b7294fb14aea824b314873/server/build/webpack.js#L251-L254">4</a></p>
</li>
</ol>
<p dir="auto">Then when pages are generated in production, only <code class="notranslate">app.js</code> is linked<br>
<a href="https://github.com/zeit/next.js/blob/832425e67e1e4e04c601dfc7bcbcd03cff0c564d/server/document.js#L143-L153">5</a>.</p>
<hr>
<p dir="auto">By:</p>
<ul dir="auto">
<li>
<p dir="auto">adjusting the UglifyJS plugin configuration <a href="https://github.com/zeit/next.js/blob/9cfea69ab148b21300b7294fb14aea824b314873/server/build/webpack.js#L215">6</a>,</p>
</li>
<li>
<p dir="auto">setting <code class="notranslate">devtool</code> in the Webpack configuration, and</p>
</li>
<li>
<p dir="auto">using <code class="notranslate">source-map-loader</code> for all JS code,</p>
</li>
</ul>
<p dir="auto">it's possible to get Next to build source maps for the files generated<br>
in step 1 and step 2.</p>
<p dir="auto">But when the chunks are merged in step 4, it causes the source map<br>
offsets to become incorrect (because only the file content is merged,<br>
the maps are not adjusted).</p>
<p dir="auto">We can't build <code class="notranslate">app.js</code> directly with Webpack, because it needs to<br>
contain the Next.js framework entry code (<code class="notranslate">main.js</code>) but <em>not</em> have it<br>
linked in as a module (it needs to execute on load).</p>
<p dir="auto">We can't easily modify Next to link in <em>both</em> <code class="notranslate">app.js</code> and <code class="notranslate">main.js</code><br>
when generating production HTML, without hacking further into the<br>
build process, as we need to a) build the two files, b) include<br>
<code class="notranslate">main.js</code> in the generated <code class="notranslate">.next/build-stats.json</code> file and c) modify<br>
<code class="notranslate">Head</code> and <code class="notranslate">NextScript</code> to include <code class="notranslate">main.js</code> (see <a href="https://github.com/zeit/next.js/blob/832425e67e1e4e04c601dfc7bcbcd03cff0c564d/server/document.js#L143-L153">5</a> again).</p>
<p dir="auto">We can modify the CommonsChunkPlugin setup from step 2, and the<br>
<code class="notranslate">CombineAssetsPlugin</code> from step 4:</p>
<ol dir="auto">
<li>
<p dir="auto">Create a <em>single</em> <code class="notranslate">common.js</code> chunk that will have a correct source<br>
map.</p>
</li>
<li>
<p dir="auto">Merge <code class="notranslate">common.js</code> and <code class="notranslate">main.js</code> using <code class="notranslate">CombineAssetsPlugin</code>,<br>
ensuring that <code class="notranslate">common.js</code> is <em>first</em> in the file.</p>
</li>
</ol>
<p dir="auto">Then we can reuse the generated source map file for<br>
<code class="notranslate">common.js</code> (<code class="notranslate">common.js.map</code>), by copying it somewhere that Next can<br>
serve directly (eg. <code class="notranslate">static/</code>, and linking it from <code class="notranslate">app.js</code> by<br>
appending a source map comment like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="//# sourceMappingURL=/static/common.js.map"><pre class="notranslate"><code class="notranslate">//# sourceMappingURL=/static/common.js.map
</code></pre></div>
<p dir="auto">Then we have:</p>
<ol dir="auto">
<li>
<p dir="auto">Server generating HTML that links to <code class="notranslate">app.js</code></p>
</li>
<li>
<p dir="auto"><code class="notranslate">app.js</code> links to <code class="notranslate">static/common.js.map</code></p>
</li>
<li>
<p dir="auto">the <em>first</em> part of <code class="notranslate">app.js</code> is identical to <code class="notranslate">common.js</code> so the map<br>
file is correct for most of the code in <code class="notranslate">app.js</code>.</p>
</li>
<li>
<p dir="auto"><code class="notranslate">static/common.js.map</code> is a source map for app <em>and</em> library code.</p>
</li>
</ol>
<hr>
<p dir="auto">There is a hole where client-side errors in <code class="notranslate">getInitialProps</code> do not<br>
use a source map when being displayed in Chrome.</p>
<hr>