Pass through buildId to webpack config in development (#4665)

Fixes #4664

server/hot-reloader.js

@@ -5,14 +5,14 @@ import del from 'del'
 import onDemandEntryHandler from './on-demand-entry-handler'
 import webpack from 'webpack'
 import getBaseWebpackConfig from '../build/webpack'
-import UUID from 'uuid'
 import {
   addCorsSupport
 } from './utils'
 import {IS_BUNDLED_PAGE_REGEX} from '../lib/constants'
 
 export default class HotReloader {
-  constructor (dir, { quiet, config } = {}) {
+  constructor (dir, { quiet, config, buildId } = {}) {
+    this.buildId = buildId
     this.dir = dir
     this.quiet = quiet
     this.middlewares = []
@@ -25,11 +25,6 @@ export default class HotReloader {
     this.prevChunkNames = null
     this.prevFailedChunkNames = null
     this.prevChunkHashes = null
-    // Here buildId could be any value.
-    // Our router accepts any value in the dev mode.
-    // But for the webpack-compiler and for the webpack-dev-server
-    // it should be the same value.
-    this.buildId = UUID.v4()
 
     this.config = config
   }
@@ -62,8 +57,8 @@ export default class HotReloader {
     await this.clean()
 
     const configs = await Promise.all([
-      getBaseWebpackConfig(this.dir, { dev: true, isServer: false, config: this.config }),
-      getBaseWebpackConfig(this.dir, { dev: true, isServer: true, config: this.config })
+      getBaseWebpackConfig(this.dir, { dev: true, isServer: false, config: this.config, buildId: this.buildId }),
+      getBaseWebpackConfig(this.dir, { dev: true, isServer: true, config: this.config, buildId: this.buildId })
     ])
 
     const compiler = webpack(configs)

server/index.js

@@ -37,8 +37,6 @@ export default class Server {
     this.nextConfig = loadConfig(phase, this.dir, conf)
     this.distDir = join(this.dir, this.nextConfig.distDir)
 
-    this.hotReloader = dev ? this.getHotReloader(this.dir, { quiet, config: this.nextConfig }) : null
-
     // Only serverRuntimeConfig needs the default
     // publicRuntimeConfig gets it's default in client/index.js
     const {serverRuntimeConfig = {}, publicRuntimeConfig, assetPrefix, generateEtags} = this.nextConfig
@@ -48,6 +46,7 @@ export default class Server {
       process.exit(1)
     }
     this.buildId = !dev ? this.readBuildId() : '-'
+    this.hotReloader = dev ? this.getHotReloader(this.dir, { quiet, config: this.nextConfig, buildId: this.buildId }) : null
     this.renderOpts = {
       dev,
       staticMarkup,

test/integration/config/next.config.js

@@ -1,5 +1,5 @@
 const withCSS = require('@zeit/next-css')
-
+const webpack = require('webpack')
 module.exports = withCSS({
   onDemandEntries: {
     // Make sure entries are not getting disposed.
@@ -11,5 +11,14 @@ module.exports = withCSS({
   },
   publicRuntimeConfig: {
     staticFolder: '/static'
+  },
+  webpack (config, {buildId}) {
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env.CONFIG_BUILD_ID': JSON.stringify(buildId)
+      })
+    )
+
+    return config
   }
 })

test/integration/config/pages/build-id.js

@@ -0,0 +1,3 @@
+export default () => {
+  return <p id='buildId'>{process.env.CONFIG_BUILD_ID}</p>
+}

test/integration/config/test/index.test.js

@@ -24,6 +24,7 @@ describe('Configuration', () => {
     // pre-build all pages at the start
     await Promise.all([
       renderViaHTTP(context.appPort, '/next-config'),
+      renderViaHTTP(context.appPort, '/build-id'),
       renderViaHTTP(context.appPort, '/webpack-css')
     ])
   })

test/integration/config/test/rendering.js

@@ -28,5 +28,10 @@ export default function ({ app }, suiteName, render, fetch) {
       const $ = await get$('/next-config')
       expect($('#server-and-client').text() === '/static')
     })
+
+    test('renders the build id in development mode', async () => {
+      const $ = await get$('/build-id')
+      expect($('#buildId').text() === '-')
+    })
   })
 }