Fix missing client entry matcher and simplify imports path (#38691)

### Changes

#### Add missing virtual client entry matcher for css modules
client entry module has no file path, add the missing file matcher for client css modules loader

#### Use relative paths for imports in client entry to avoid module resolving failure.

if it's `next/head` or other 3rd party installed path, just import it instead of the resolved file path

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 = /(?<!\.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
@@ -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),

packages/next/build/webpack/plugins/client-entry-plugin.ts

@@ -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)
 
@@ -90,7 +100,7 @@ export class ClientEntryPlugin {
           }
 
           compilation.moduleGraph
-            .getOutgoingConnections(module)
+            .getOutgoingConnections(mod)
             .forEach((connection: any) => {
               filterClientComponents(connection.dependency)
             })