From a33bb5bec5c040f5687f55ad5be2b6e3f8e6e97c Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 17 Jul 2020 10:38:06 +0200 Subject: [PATCH] Fix app-document-import-order test for webpack 5 (#15224) --- package.json | 2 +- packages/next/build/entries.ts | 2 +- packages/next/build/webpack-config.ts | 21 ++++++++----------- packages/next/client/page-loader.js | 2 +- packages/next/next-server/lib/constants.ts | 11 +++++----- .../server/get-route-from-entrypoint.ts | 2 -- packages/next/server/hot-reloader.ts | 2 +- .../next/server/on-demand-entry-handler.ts | 2 +- packages/next/types/webpack.d.ts | 1 + .../app-document-import-order/next.config.js | 2 ++ .../build-output/test/index.test.js | 8 +++---- test/integration/dist-dir/test/index.test.js | 2 +- 12 files changed, 27 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 37a89e189f5b6..eae8ee3406537 100644 --- a/package.json +++ b/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": { diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts index 9fec100c1a4b2..7d464a7746bc2 100644 --- a/packages/next/build/entries.ts +++ b/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) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 6a3fc9f808166..a0670e4d168b7 100644 --- a/packages/next/build/webpack-config.ts +++ b/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'] diff --git a/packages/next/client/page-loader.js b/packages/next/client/page-loader.js index e7177823255a8..ab00bf6924004 100644 --- a/packages/next/client/page-loader.js +++ b/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) diff --git a/packages/next/next-server/lib/constants.ts b/packages/next/next-server/lib/constants.ts index 96b1a61c6d5b9..86cbd01ba1367 100644 --- a/packages/next/next-server/lib/constants.ts +++ b/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' diff --git a/packages/next/next-server/server/get-route-from-entrypoint.ts b/packages/next/next-server/server/get-route-from-entrypoint.ts index 98efd1b6c6e8f..cf52a5469f4f7 100644 --- a/packages/next/next-server/server/get-route-from-entrypoint.ts +++ b/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//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 diff --git a/packages/next/server/hot-reloader.ts b/packages/next/server/hot-reloader.ts index aab38b3a10f86..ba233ba90ca81 100644 --- a/packages/next/server/hot-reloader.ts +++ b/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 diff --git a/packages/next/server/on-demand-entry-handler.ts b/packages/next/server/on-demand-entry-handler.ts index 225ea85553263..d3f3bfdced30b 100644 --- a/packages/next/server/on-demand-entry-handler.ts +++ b/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) diff --git a/packages/next/types/webpack.d.ts b/packages/next/types/webpack.d.ts index 1f97f70d26c82..6d5eca3c9a54c 100644 --- a/packages/next/types/webpack.d.ts +++ b/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) */ diff --git a/test/integration/app-document-import-order/next.config.js b/test/integration/app-document-import-order/next.config.js index c9c416abb483a..b594da80fce9f 100644 --- a/test/integration/app-document-import-order/next.config.js +++ b/test/integration/app-document-import-order/next.config.js @@ -17,6 +17,7 @@ module.exports = { enforce: true, priority: 10, chunks: 'all', + filename: 'static/chunks/[name].[chunkhash].js', }, requiredByPage: { test: /requiredByPage.js/, @@ -24,6 +25,7 @@ module.exports = { enforce: true, priority: 10, chunks: 'all', + filename: 'static/chunks/[name].[chunkhash].js', }, }, }, diff --git a/test/integration/build-output/test/index.test.js b/test/integration/build-output/test/index.test.js index 010f1fd3804a2..2d12e3a72fad9 100644 --- a/test/integration/build-output/test/index.test.js +++ b/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') diff --git a/test/integration/dist-dir/test/index.test.js b/test/integration/dist-dir/test/index.test.js index 5d2ea70a79ce9..35b2e458d7ced 100644 --- a/test/integration/dist-dir/test/index.test.js +++ b/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)