Fix app-document-import-order test for webpack 5 (#15224)

package.json

@@ -33,7 +33,7 @@
     "publish-stable": "lerna version --force-publish",
     "lint-staged": "lint-staged",
     "next": "node packages/next/dist/bin/next",
-    "debug": "node --inspect-brk packages/next/dist/bin/next"
+    "debug": "node --inspect packages/next/dist/bin/next"
   },
   "pre-commit": "lint-staged",
   "devDependencies": {

packages/next/build/entries.ts

@@ -103,7 +103,7 @@ export function createEntrypoints(
     const bundleFile = normalizePagePath(page)
     const isApiRoute = page.match(API_ROUTE)
 
-    const clientBundlePath = posix.join('static', 'pages', bundleFile)
+    const clientBundlePath = posix.join('pages', bundleFile)
     const serverBundlePath = posix.join('pages', bundleFile)
 
     const isLikeServerless = isTargetLikeServerless(target)

packages/next/build/webpack-config.ts

@@ -134,9 +134,7 @@ function getOptimizedAliases(isServer: boolean): { [pkg: string]: string } {
 }
 
 type ClientEntries = {
-  'main.js': string[]
-} & {
-  [key: string]: string
+  [key: string]: string | string[]
 }
 
 export default async function getBaseWebpackConfig(
@@ -432,7 +430,6 @@ export default async function getBaseWebpackConfig(
         shared: {
           name(module, chunks) {
             return (
-              (isWebpack5 ? 'static/chunks/' : '') +
               crypto
                 .createHash('sha1')
                 .update(
@@ -443,8 +440,7 @@ export default async function getBaseWebpackConfig(
                     ''
                   )
                 )
-                .digest('hex') +
-              (isModuleCSS(module) ? '_CSS' : '')
+                .digest('hex') + (isModuleCSS(module) ? '_CSS' : '')
             )
           },
           priority: 10,
@@ -713,7 +709,9 @@ export default async function getBaseWebpackConfig(
     output: {
       path: outputPath,
       // On the server we don't use the chunkhash
-      filename: dev || isServer ? '[name].js' : '[name]-[chunkhash].js',
+      filename: isServer
+        ? '[name].js'
+        : `static/chunks/[name]${dev ? '' : '-[chunkhash]'}.js`,
       library: isServer ? undefined : '_N_E',
       libraryTarget: isServer ? 'commonjs2' : 'assign',
       hotUpdateChunkFilename: isWebpack5
@@ -1277,11 +1275,10 @@ export default async function getBaseWebpackConfig(
           : originalEntry
       // Server compilation doesn't have main.js
       if (clientEntries && entry['main.js'] && entry['main.js'].length > 0) {
-        const originalFile = clientEntries[CLIENT_STATIC_FILES_RUNTIME_MAIN]
-        entry[CLIENT_STATIC_FILES_RUNTIME_MAIN] = [
-          ...entry['main.js'],
-          originalFile,
-        ]
+        const originalFile = clientEntries[
+          CLIENT_STATIC_FILES_RUNTIME_MAIN
+        ] as string
+        entry[CLIENT_STATIC_FILES_RUNTIME_MAIN] = [...['main.js'], originalFile]
       }
       delete entry['main.js']
 

packages/next/client/page-loader.js

@@ -252,7 +252,7 @@ export default class PageLoader {
           route = normalizeRoute(route)
           let scriptRoute = getAssetPathFromRoute(route, '.js')
 
-          const url = `${this.assetPrefix}/_next/static/pages${encodeURI(
+          const url = `${this.assetPrefix}/_next/static/chunks/pages${encodeURI(
             scriptRoute
           )}`
           this.loadScript(url, route)

packages/next/next-server/lib/constants.ts

@@ -19,17 +19,16 @@ export const CLIENT_STATIC_FILES_PATH = 'static'
 export const CLIENT_STATIC_FILES_RUNTIME = 'runtime'
 export const AMP_RENDER_TARGET = '__NEXT_AMP_RENDER_TARGET__'
 export const STRING_LITERAL_DROP_BUNDLE = '__NEXT_DROP_CLIENT_FILE__'
-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`
+export const CLIENT_STATIC_FILES_RUNTIME_MAIN = `main`
 // static/runtime/react-refresh.js
-export const CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH = `${CLIENT_STATIC_FILES_RUNTIME_PATH}/react-refresh`
+export const CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH = `react-refresh`
 // static/runtime/amp.js
-export const CLIENT_STATIC_FILES_RUNTIME_AMP = `${CLIENT_STATIC_FILES_RUNTIME_PATH}/amp`
+export const CLIENT_STATIC_FILES_RUNTIME_AMP = `amp`
 // static/runtime/webpack.js
-export const CLIENT_STATIC_FILES_RUNTIME_WEBPACK = `${CLIENT_STATIC_FILES_RUNTIME_PATH}/webpack`
+export const CLIENT_STATIC_FILES_RUNTIME_WEBPACK = `webpack`
 // static/runtime/polyfills.js
-export const CLIENT_STATIC_FILES_RUNTIME_POLYFILLS = `${CLIENT_STATIC_FILES_RUNTIME_PATH}/polyfills`
+export const CLIENT_STATIC_FILES_RUNTIME_POLYFILLS = `polyfills`
 export const TEMPORARY_REDIRECT_STATUS = 307
 export const PERMANENT_REDIRECT_STATUS = 308
 export const STATIC_PROPS_ID = '__N_SSG'

packages/next/next-server/server/get-route-from-entrypoint.ts

@@ -1,7 +1,5 @@
 import getRouteFromAssetPath from '../lib/router/utils/get-route-from-asset-path'
 
-// matches static/<buildid>/pages/:page*.js
-// const SERVER_ROUTE_NAME_REGEX = /^static[/\\][^/\\]+[/\\]pages[/\\](.*)$/
 // matches pages/:page*.js
 const SERVER_ROUTE_NAME_REGEX = /^pages[/\\](.*)$/
 // matches static/pages/:page*.js

packages/next/server/hot-reloader.ts

@@ -84,7 +84,7 @@ function addCorsSupport(req: IncomingMessage, res: ServerResponse) {
 }
 
 const matchNextPageBundleRequest = route(
-  '/_next/static/pages/:path*.js(\\.map|)'
+  '/_next/static/chunks/pages/:path*.js(\\.map|)'
 )
 
 // Recursively look up the issuer till it ends up at the root

packages/next/server/on-demand-entry-handler.ts

@@ -168,7 +168,7 @@ export default function onDemandEntryHandler(
 
       const bundleFile = normalizePagePath(pageUrl)
       const serverBundlePath = posix.join('pages', bundleFile)
-      const clientBundlePath = posix.join('static', 'pages', bundleFile)
+      const clientBundlePath = posix.join('pages', bundleFile)
       const absolutePagePath = pagePath.startsWith('next/dist/pages')
         ? require.resolve(pagePath)
         : join(pagesDir, pagePath)

packages/next/types/webpack.d.ts

@@ -699,6 +699,7 @@ declare module 'webpack' {
         reuseExistingChunk?: boolean
         /** Give chunks created a name (chunks with equal name are merged) */
         name?: boolean | string | ((...args: any[]) => any)
+        filename?: string
       }
       interface SplitChunksOptions {
         /** Select chunks for determining shared modules (defaults to \"async\", \"initial\" and \"all\" requires adding these chunks to the HTML) */

test/integration/app-document-import-order/next.config.js

@@ -17,13 +17,15 @@ module.exports = {
               enforce: true,
               priority: 10,
               chunks: 'all',
+              filename: 'static/chunks/[name].[chunkhash].js',
             },
             requiredByPage: {
               test: /requiredByPage.js/,
               name: 'requiredByPage',
               enforce: true,
               priority: 10,
               chunks: 'all',
+              filename: 'static/chunks/[name].[chunkhash].js',
             },
           },
         },

test/integration/build-output/test/index.test.js

@@ -26,7 +26,7 @@ describe('Build Output', () => {
 
       expect(stdout).toMatch(/\/ [ ]* \d{1,} B/)
       expect(stdout).toMatch(/\+ First Load JS shared by all [ 0-9.]* kB/)
-      expect(stdout).toMatch(/ runtime\/main\.[0-9a-z]{6}\.js [ 0-9.]* kB/)
+      expect(stdout).toMatch(/ chunks\/main\.[0-9a-z]{6}\.js [ 0-9.]* kB/)
       expect(stdout).toMatch(/ chunks\/framework\.[0-9a-z]{6}\.js [ 0-9. ]* kB/)
 
       expect(stdout).not.toContain(' /_document')
@@ -149,7 +149,7 @@ describe('Build Output', () => {
       expect(stdout).toMatch(/\/ [ ]* \d{1,} B/)
       expect(stdout).toMatch(/\/_app [ ]* \d{1,} B/)
       expect(stdout).toMatch(/\+ First Load JS shared by all [ 0-9.]* kB/)
-      expect(stdout).toMatch(/ runtime\/main\.[0-9a-z]{6}\.js [ 0-9.]* kB/)
+      expect(stdout).toMatch(/ chunks\/main\.[0-9a-z]{6}\.js [ 0-9.]* kB/)
       expect(stdout).toMatch(/ chunks\/framework\.[0-9a-z]{6}\.js [ 0-9. ]* kB/)
 
       expect(stdout).not.toContain(' /_document')
@@ -177,7 +177,7 @@ describe('Build Output', () => {
       expect(stdout).toMatch(/\/amp .* AMP/)
       expect(stdout).toMatch(/\/hybrid [ 0-9.]* B/)
       expect(stdout).toMatch(/\+ First Load JS shared by all [ 0-9.]* kB/)
-      expect(stdout).toMatch(/ runtime\/main\.[0-9a-z]{6}\.js [ 0-9.]* kB/)
+      expect(stdout).toMatch(/ chunks\/main\.[0-9a-z]{6}\.js [ 0-9.]* kB/)
       expect(stdout).toMatch(/ chunks\/framework\.[0-9a-z]{6}\.js [ 0-9. ]* kB/)
 
       expect(stdout).not.toContain(' /_document')
@@ -203,7 +203,7 @@ describe('Build Output', () => {
       expect(stdout).toMatch(/\/ [ ]* \d{1,} B/)
       expect(stdout).toMatch(/λ \/404 [ ]* \d{1,} B/)
       expect(stdout).toMatch(/\+ First Load JS shared by all [ 0-9.]* kB/)
-      expect(stdout).toMatch(/ runtime\/main\.[0-9a-z]{6}\.js [ 0-9.]* kB/)
+      expect(stdout).toMatch(/ chunks\/main\.[0-9a-z]{6}\.js [ 0-9.]* kB/)
       expect(stdout).toMatch(/ chunks\/framework\.[0-9a-z]{6}\.js [ 0-9. ]* kB/)
 
       expect(stdout).not.toContain(' /_document')

test/integration/dist-dir/test/index.test.js

@@ -17,7 +17,7 @@ const nextConfig = join(appDir, 'next.config.js')
 let appPort
 let app
 
-describe('Production Usage', () => {
+describe('distDir', () => {
   describe('With basic usage', () => {
     beforeAll(async () => {
       await nextBuild(appDir)