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)
             })