Sourcemap and Breakpoint Fixes (#3121)

* Propagate source maps through combine assets step

* Use constant development build id

server/build/plugins/combine-assets-plugin.js

@@ -1,3 +1,5 @@
+import { ConcatSource } from 'webpack-sources'
+
 // This plugin combines a set of assets into a single asset
 // This should be only used with text assets,
 // otherwise the result is unpredictable.
@@ -8,23 +10,23 @@ export default class CombineAssetsPlugin {
   }
 
   apply (compiler) {
-    compiler.plugin('after-compile', (compilation, callback) => {
+    compiler.plugin('compilation', (compilation) => {
-      let newSource = ''
+      compilation.plugin('optimize-chunk-assets', (chunks, callback) => {
+        const concat = new ConcatSource()
+
         this.input.forEach((name) => {
           const asset = compilation.assets[name]
           if (!asset) return
 
-        newSource += `${asset.source()}\n`
+          concat.add(asset)
 
           // We keep existing assets since that helps when analyzing the bundle
         })
 
-      compilation.assets[this.output] = {
+        compilation.assets[this.output] = concat
-        source: () => newSource,
-        size: () => newSource.length
-      }
 
         callback()
       })
+    })
   }
 }

server/build/plugins/dynamic-chunks-plugin.js

@@ -1,39 +1,37 @@
-export default class PagesPlugin {
+import { ConcatSource } from 'webpack-sources'
+
+export default class DynamicChunksPlugin {
   apply (compiler) {
     const isImportChunk = /^chunks[/\\].*\.js$/
     const matchChunkName = /^chunks[/\\](.*)$/
 
-    compiler.plugin('after-compile', (compilation, callback) => {
+    compiler.plugin('compilation', (compilation) => {
-      const chunks = Object
+      compilation.plugin('optimize-chunk-assets', (chunks, callback) => {
-        .keys(compilation.namedChunks)
+        chunks = chunks.filter(chunk => isImportChunk.test(chunk.name))
-        .map(key => compilation.namedChunks[key])
-        .filter(chunk => isImportChunk.test(chunk.name))
 
         chunks.forEach((chunk) => {
           const asset = compilation.assets[chunk.name]
           if (!asset) return
 
           const chunkName = matchChunkName.exec(chunk.name)[1]
+          const concat = new ConcatSource()
 
-        const content = asset.source()
+          concat.add(`__NEXT_REGISTER_CHUNK('${chunkName}', function() {
-        const newContent = `
+          `)
-          window.__NEXT_REGISTER_CHUNK('${chunkName}', function() {
+          concat.add(asset)
-            ${content}
+          concat.add(`
             })
-        `
+          `)
+
           // Replace the exisiting chunk with the new content
-        compilation.assets[chunk.name] = {
+          compilation.assets[chunk.name] = concat
-          source: () => newContent,
-          size: () => newContent.length
-        }
 
           // This is to support, webpack dynamic import support with HMR
-        compilation.assets[`chunks/${chunk.id}`] = {
+          compilation.assets[`chunks/${chunk.name}`] = concat
-          source: () => newContent,
-          size: () => newContent.length
-        }
         })
+
         callback()
       })
+    })
   }
 }

server/build/plugins/pages-plugin.js

@@ -1,3 +1,4 @@
+import { ConcatSource } from 'webpack-sources'
 import {
   IS_BUNDLED_PAGE,
   MATCH_ROUTE_NAME
@@ -5,14 +6,11 @@ import {
 
 export default class PagesPlugin {
   apply (compiler) {
-    compiler.plugin('after-compile', (compilation, callback) => {
+    compiler.plugin('compilation', (compilation) => {
-      const pages = Object
+      compilation.plugin('optimize-chunk-assets', (chunks, callback) => {
-        .keys(compilation.namedChunks)
+        const pages = chunks.filter(chunk => IS_BUNDLED_PAGE.test(chunk.name))
-        .map(key => compilation.namedChunks[key])
-        .filter(chunk => IS_BUNDLED_PAGE.test(chunk.name))
 
         pages.forEach((chunk) => {
-        const page = compilation.assets[chunk.name]
           const pageName = MATCH_ROUTE_NAME.exec(chunk.name)[1]
           let routeName = pageName
 
@@ -28,20 +26,28 @@ export default class PagesPlugin {
 
           routeName = `/${routeName.replace(/(^|\/)index$/, '')}`
 
-        const content = page.source()
+          // Replace the exisiting chunk with the new content
-        const newContent = `
+          const asset = compilation.assets[chunk.name]
-          window.__NEXT_REGISTER_PAGE('${routeName}', function() {
+          if (!asset) return
-            var comp = ${content}
+
+          const concat = new ConcatSource()
+
+          concat.add(`
+            __NEXT_REGISTER_PAGE('${routeName}', function() {
+              var comp = 
+          `)
+          concat.add(asset)
+          concat.add(`
               return { page: comp.default }
             })
-        `
+          `)
+
           // Replace the exisiting chunk with the new content
-        compilation.assets[chunk.name] = {
+          compilation.assets[chunk.name] = concat
-          source: () => newContent,
-          size: () => newContent.length
-        }
         })
+
         callback()
       })
+    })
   }
 }

server/index.js

@@ -408,7 +408,11 @@ export default class Server {
   }
 
   handleBuildId (buildId, res) {
-    if (this.dev) return true
+    if (this.dev) {
+      res.setHeader('Cache-Control', 'no-store, must-revalidate')
+      return true
+    }
+
     if (buildId !== this.renderOpts.buildId) {
       return false
     }
@@ -428,13 +432,17 @@ export default class Server {
   }
 
   handleBuildHash (filename, hash, res) {
-    if (this.dev) return
+    if (this.dev) {
+      res.setHeader('Cache-Control', 'no-store, must-revalidate')
+      return true
+    }
 
     if (hash !== this.buildStats[filename].hash) {
       throw new Error(`Invalid Build File Hash(${hash}) for chunk: ${filename}`)
     }
 
     res.setHeader('Cache-Control', 'max-age=365000000, immutable')
+    return true
   }
 
   send404 (res) {

server/render.js

@@ -93,11 +93,6 @@ async function doRender (req, res, pathname, query, {
   }
 
   const docProps = await loadGetInitialProps(Document, { ...ctx, renderPage })
-  // While developing, we should not cache any assets.
-  // So, we use a different buildId for each page load.
-  // With that we can ensure, we have unique URL for assets per every page load.
-  // So, it'll prevent issues like this: https://git.io/vHLtb
-  const devBuildId = Date.now()
 
   if (res.finished) return
 
@@ -107,7 +102,7 @@ async function doRender (req, res, pathname, query, {
       props,
       pathname,
       query,
-      buildId: dev ? devBuildId : buildId,
+      buildId,
       buildStats,
       assetPrefix,
       nextExport,