From 27eb5bb42c5b152d0e99c3e2bc05afedd65a6cae Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Fri, 15 Jul 2022 17:22:44 +0200 Subject: [PATCH 1/3] Simplify imports path in virtual client entry --- .../webpack/plugins/client-entry-plugin.ts | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/next/build/webpack/plugins/client-entry-plugin.ts b/packages/next/build/webpack/plugins/client-entry-plugin.ts index 46aef7ee4e82..5c1728f2182b 100644 --- a/packages/next/build/webpack/plugins/client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/client-entry-plugin.ts @@ -75,10 +75,23 @@ export class ClientEntryPlugin { const clientComponentImports: string[] = [] function filterClientComponents(dependency: any) { - const module = compilation.moduleGraph.getResolvedModule(dependency) - if (!module) return + const mod = compilation.moduleGraph.getResolvedModule(dependency) + if (!mod) return + + // Keep client imports as simple + // js module: -> raw request, e.g. next/head + // client js: -> relative imports + // TODO-APP: applied loaders for css + // *.css (with loaders applied): -> relative css imports + + const { relativePath } = mod.resourceResolveData || {} + const modRequest = + mod.rawRequest && + !mod.rawRequest.startsWith('.') && + !mod.rawRequest.startsWith('/') + ? mod.rawRequest + : relativePath || mod.userRequest - const modRequest = module.userRequest if (visited.has(modRequest)) return visited.add(modRequest) @@ -90,7 +103,7 @@ export class ClientEntryPlugin { } compilation.moduleGraph - .getOutgoingConnections(module) + .getOutgoingConnections(mod) .forEach((connection: any) => { filterClientComponents(connection.dependency) }) From 6e8a1663ac1d21df09f025f8dac69b4a8edd2d85 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Fri, 15 Jul 2022 23:15:27 +0200 Subject: [PATCH 2/3] add missing client entry matcher --- .../build/webpack/config/blocks/css/index.ts | 17 +++++++++++------ .../webpack/plugins/client-entry-plugin.ts | 10 +++++----- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts index 5499e90cc227..68304c2350a4 100644 --- a/packages/next/build/webpack/config/blocks/css/index.ts +++ b/packages/next/build/webpack/config/blocks/css/index.ts @@ -21,6 +21,8 @@ const regexCssModules = /\.module\.css$/ // RegExps for Syntactically Awesome Style Sheets const regexSassGlobal = /(? !file /** * Mark a rule as removable if built-in CSS support is disabled @@ -213,8 +215,13 @@ export const css = curry(async function css( // CSS Modules are only supported in the user's application. We're // not yet allowing CSS imports _within_ `node_modules`. issuer: { - and: [ctx.rootDirectory], - not: [/node_modules/], + or: [ + { + and: [ctx.rootDirectory], + not: [/node_modules/], + }, + clientEntryMatcher, + ], }, use: getCssModuleLoader(ctx, lazyPostCSSInitializer), }), @@ -364,8 +371,7 @@ export const css = curry(async function css( issuer: { or: [ { and: [ctx.rootDirectory, /\.(js|mjs|jsx|ts|tsx)$/] }, - // Also match the virtual client entry which doesn't have file path - (filePath) => !filePath, + clientEntryMatcher, ], }, use: getGlobalCssLoader(ctx, lazyPostCSSInitializer), @@ -382,8 +388,7 @@ export const css = curry(async function css( issuer: { or: [ { and: [ctx.rootDirectory, /\.(js|mjs|jsx|ts|tsx)$/] }, - // Also match the virtual client entry which doesn't have file path - (filePath) => !filePath, + clientEntryMatcher, ], }, use: getCssModuleLoader(ctx, lazyPostCSSInitializer), diff --git a/packages/next/build/webpack/plugins/client-entry-plugin.ts b/packages/next/build/webpack/plugins/client-entry-plugin.ts index 5c1728f2182b..50217c918447 100644 --- a/packages/next/build/webpack/plugins/client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/client-entry-plugin.ts @@ -83,13 +83,13 @@ export class ClientEntryPlugin { // client js: -> relative imports // TODO-APP: applied loaders for css // *.css (with loaders applied): -> relative css imports - + const rawRequest = mod.rawRequest || '' const { relativePath } = mod.resourceResolveData || {} const modRequest = - mod.rawRequest && - !mod.rawRequest.startsWith('.') && - !mod.rawRequest.startsWith('/') - ? mod.rawRequest + !rawRequest.endsWith('.css') && + !rawRequest.startsWith('.') && + !rawRequest.startsWith('/') + ? rawRequest : relativePath || mod.userRequest if (visited.has(modRequest)) return From 36eda6cfe87124c29037f48b7ce2273cc3d8a622 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Fri, 15 Jul 2022 23:22:35 +0200 Subject: [PATCH 3/3] revert import path --- .../next/build/webpack/plugins/client-entry-plugin.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/next/build/webpack/plugins/client-entry-plugin.ts b/packages/next/build/webpack/plugins/client-entry-plugin.ts index 50217c918447..46ba3398fed6 100644 --- a/packages/next/build/webpack/plugins/client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/client-entry-plugin.ts @@ -79,18 +79,15 @@ export class ClientEntryPlugin { if (!mod) return // Keep client imports as simple - // js module: -> raw request, e.g. next/head - // client js: -> relative imports - // TODO-APP: applied loaders for css - // *.css (with loaders applied): -> relative css imports + // native or installed js module: -> raw request, e.g. next/head + // client js or css: -> user request const rawRequest = mod.rawRequest || '' - const { relativePath } = mod.resourceResolveData || {} const modRequest = !rawRequest.endsWith('.css') && !rawRequest.startsWith('.') && !rawRequest.startsWith('/') ? rawRequest - : relativePath || mod.userRequest + : mod.userRequest if (visited.has(modRequest)) return visited.add(modRequest)