Rename commons directory to runtime (#4853)

build/webpack.js

@@ -17,7 +17,7 @@ import PagesManifestPlugin from './webpack/plugins/pages-manifest-plugin'
 import BuildManifestPlugin from './webpack/plugins/build-manifest-plugin'
 import ChunkNamesPlugin from './webpack/plugins/chunk-names-plugin'
 import { ReactLoadablePlugin } from './webpack/plugins/react-loadable-plugin'
-import {SERVER_DIRECTORY, NEXT_PROJECT_ROOT, NEXT_PROJECT_ROOT_NODE_MODULES, NEXT_PROJECT_ROOT_DIST, DEFAULT_PAGES_DIR, REACT_LOADABLE_MANIFEST} from '../lib/constants'
+import {SERVER_DIRECTORY, NEXT_PROJECT_ROOT, NEXT_PROJECT_ROOT_NODE_MODULES, NEXT_PROJECT_ROOT_DIST, DEFAULT_PAGES_DIR, REACT_LOADABLE_MANIFEST, CLIENT_STATIC_FILES_RUNTIME_WEBPACK, CLIENT_STATIC_FILES_RUNTIME_MAIN} from '../lib/constants'
 
 // The externals config makes sure that
 // on the server side when modules are
@@ -67,7 +67,7 @@ function optimizationConfig ({dir, dev, isServer, totalPages}) {
 
   const config: any = {
     runtimeChunk: {
-      name: 'static/commons/runtime.js'
+      name: CLIENT_STATIC_FILES_RUNTIME_WEBPACK
     },
     splitChunks: false
   }
@@ -133,7 +133,7 @@ export default async function getBaseWebpackConfig (dir: string, {dev = false, i
   const clientEntries = !isServer ? {
     // Backwards compatibility
     'main.js': [],
-    'static/commons/main.js': [
+    [CLIENT_STATIC_FILES_RUNTIME_MAIN]: [
       path.join(NEXT_PROJECT_ROOT_DIST, 'client', (dev ? `next-dev` : 'next'))
     ].filter(Boolean)
   } : {}
@@ -160,7 +160,7 @@ export default async function getBaseWebpackConfig (dir: string, {dev = false, i
       path: outputPath,
       filename: ({chunk}) => {
         // Use `[name]-[chunkhash].js` in production
-        if (!dev && (chunk.name === 'static/commons/main.js' || chunk.name === 'static/commons/runtime.js')) {
+        if (!dev && (chunk.name === CLIENT_STATIC_FILES_RUNTIME_MAIN || chunk.name === CLIENT_STATIC_FILES_RUNTIME_WEBPACK)) {
           return chunk.name.replace(/\.js$/, '-' + chunk.renderedHash + '.js')
         }
         return '[name]'
@@ -254,9 +254,9 @@ export default async function getBaseWebpackConfig (dir: string, {dev = false, i
 
     // Server compilation doesn't have main.js
     if (typeof entry['main.js'] !== 'undefined') {
-      entry['static/commons/main.js'] = [
+      entry[CLIENT_STATIC_FILES_RUNTIME_MAIN] = [
         ...entry['main.js'],
-        ...entry['static/commons/main.js']
+        ...entry[CLIENT_STATIC_FILES_RUNTIME_MAIN]
       ]
 
       delete entry['main.js']

build/webpack/plugins/build-manifest-plugin.js

@@ -1,6 +1,6 @@
 // @flow
 import { RawSource } from 'webpack-sources'
-import {BUILD_MANIFEST, ROUTE_NAME_REGEX, IS_BUNDLED_PAGE_REGEX} from '../../../lib/constants'
+import {BUILD_MANIFEST, ROUTE_NAME_REGEX, IS_BUNDLED_PAGE_REGEX, CLIENT_STATIC_FILES_RUNTIME_MAIN} from '../../../lib/constants'
 
 // This plugin creates a build-manifest.json for all assets that are being output
 // It has a mapping of "entry" filename to real filename. Because the real filename can be hashed in production
@@ -10,7 +10,7 @@ export default class BuildManifestPlugin {
       const {chunks} = compilation
       const assetMap = {pages: {}, css: []}
 
-      const mainJsChunk = chunks.find((c) => c.name === 'static/commons/main.js')
+      const mainJsChunk = chunks.find((c) => c.name === CLIENT_STATIC_FILES_RUNTIME_MAIN)
       const mainJsFiles = mainJsChunk && mainJsChunk.files.length > 0 ? mainJsChunk.files.filter((file) => /\.js$/.test(file)) : []
 
       // compilation.entrypoints is a Map object, so iterating over it 0 is the key and 1 is the value

client/dev-error-overlay/hot-dev-client.js

@@ -39,8 +39,7 @@ export default function connect (options) {
   ErrorOverlay.startReportingRuntimeErrors({
     onError: function () {
       hadRuntimeError = true
-    },
-    filename: '/_next/static/commons/manifest.js'
+    }
   })
 
   if (module.hot && typeof module.hot.dispose === 'function') {

lib/constants.js

@@ -23,3 +23,9 @@ export const NEXT_PROJECT_ROOT_DIST = join(NEXT_PROJECT_ROOT, 'dist')
 export const NEXT_PROJECT_ROOT_NODE_MODULES = join(NEXT_PROJECT_ROOT, 'node_modules')
 export const DEFAULT_PAGES_DIR = join(NEXT_PROJECT_ROOT_DIST, 'pages')
 export const CLIENT_STATIC_FILES_PATH = 'static'
+export const CLIENT_STATIC_FILES_RUNTIME = 'runtime'
+export const CLIENT_STATIC_FILES_RUNTIME_PATH = `${CLIENT_STATIC_FILES_PATH}/${CLIENT_STATIC_FILES_RUNTIME}`
+// static/runtime/main.js
+export const CLIENT_STATIC_FILES_RUNTIME_MAIN = `${CLIENT_STATIC_FILES_RUNTIME_PATH}/main.js`
+// static/runtime/webpack.js
+export const CLIENT_STATIC_FILES_RUNTIME_WEBPACK = `${CLIENT_STATIC_FILES_RUNTIME_PATH}/webpack.js`

server/index.js

@@ -13,7 +13,7 @@ import {
 import Router from './router'
 import { isInternalUrl } from './utils'
 import loadConfig from './config'
-import {PHASE_PRODUCTION_SERVER, PHASE_DEVELOPMENT_SERVER, BLOCKED_PAGES, BUILD_ID_FILE, CLIENT_STATIC_FILES_PATH} from '../lib/constants'
+import {PHASE_PRODUCTION_SERVER, PHASE_DEVELOPMENT_SERVER, BLOCKED_PAGES, BUILD_ID_FILE, CLIENT_STATIC_FILES_PATH, CLIENT_STATIC_FILES_RUNTIME} from '../lib/constants'
 import * as asset from '../lib/asset'
 import * as envConfig from '../lib/runtime-config'
 import { isResSent } from '../lib/utils'
@@ -129,7 +129,7 @@ export default class Server {
         // The chunks folder holds dynamic entries
         // The buildId folder holds pages and potentially other assets. As buildId changes per build it can be long-term cached.
         // In development they don't have a hash, and shouldn't be cached by the browser.
-        if (params.path[0] === 'commons' || params.path[0] === 'chunks' || params.path[0] === this.buildId) {
+        if (params.path[0] === CLIENT_STATIC_FILES_RUNTIME || params.path[0] === 'chunks' || params.path[0] === this.buildId) {
           if (this.dev) {
             res.setHeader('Cache-Control', 'no-store, must-revalidate')
           } else {

test/integration/production/test/index.test.js

@@ -15,7 +15,7 @@ import webdriver from 'next-webdriver'
 import fetch from 'node-fetch'
 import dynamicImportTests from '../../basic/test/dynamic'
 import security from './security'
-import {BUILD_MANIFEST, REACT_LOADABLE_MANIFEST} from 'next/constants'
+import {BUILD_MANIFEST, REACT_LOADABLE_MANIFEST, CLIENT_STATIC_FILES_RUNTIME_MAIN} from 'next/constants'
 
 const appDir = join(__dirname, '../')
 let appPort
@@ -69,7 +69,7 @@ describe('Production Usage', () => {
       resources.push(url + reactLoadableManifest['../../components/hello1'][0].publicPath)
 
       // test main.js
-      resources.push(url + buildManifest['static/commons/main.js'][0])
+      resources.push(url + buildManifest[CLIENT_STATIC_FILES_RUNTIME_MAIN][0])
 
       const responses = await Promise.all(resources.map((resource) => fetch(resource)))