Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix missing client entry matcher and simplify imports path #38691

Merged
merged 4 commits into from Jul 16, 2022
Merged

Fix missing client entry matcher and simplify imports path #38691

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
27eb5bb
Simplify imports path in virtual client entry
huozhi Jul 15, 2022
6e8a166
add missing client entry matcher
huozhi Jul 15, 2022
36eda6c
revert import path
huozhi Jul 15, 2022
32067f3
Merge branch 'canary' into fix/client-entry-imports-path
huozhi Jul 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 11 additions & 6 deletions packages/next/build/webpack/config/blocks/css/index.ts
View file
Open in desktop
Expand Up @@ -21,6 +21,8 @@ const regexCssModules = /\.module\.css$/
// RegExps for Syntactically Awesome Style Sheets
const regexSassGlobal = /(?<!\.module)\.(scss|sass)$/
const regexSassModules = /\.module\.(scss|sass)$/
// Also match the virtual client entry which doesn't have file path
const clientEntryMatcher = (file: string) => !file

/**
* Mark a rule as removable if built-in CSS support is disabled
Expand Down Expand Up @@ -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),
}),
Expand Down Expand Up @@ -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),
Expand All @@ -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),
Expand Down
18 changes: 14 additions & 4 deletions packages/next/build/webpack/plugins/client-entry-plugin.ts
View file
Open in desktop
Expand Up @@ -75,10 +75,20 @@ 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
// native or installed js module: -> raw request, e.g. next/head
// client js or css: -> user request
const rawRequest = mod.rawRequest || ''
const modRequest =
!rawRequest.endsWith('.css') &&
!rawRequest.startsWith('.') &&
!rawRequest.startsWith('/')
? rawRequest
: mod.userRequest

const modRequest = module.userRequest
if (visited.has(modRequest)) return
visited.add(modRequest)

Expand All @@ -90,7 +100,7 @@ export class ClientEntryPlugin {
}

compilation.moduleGraph
.getOutgoingConnections(module)
.getOutgoingConnections(mod)
.forEach((connection: any) => {
filterClientComponents(connection.dependency)
})
Expand Down