diff --git a/packages/next/src/build/handle-externals.ts b/packages/next/src/build/handle-externals.ts
index a52f9dea1a..4457155ce5 100644
--- a/packages/next/src/build/handle-externals.ts
+++ b/packages/next/src/build/handle-externals.ts
@@ -301,10 +301,8 @@ export function makeExternalHandler({
       return resolveResult.localRes
     }
 
-    // Forcedly resolve the styled-jsx installed by next.js,
-    // since `resolveExternal` cannot find the styled-jsx dep with pnpm
-    if (request === 'styled-jsx/style') {
-      resolveResult.res = defaultOverrides['styled-jsx/style']
+    if (request === 'styled-jsx/style' && !isAppLayer) {
+      return `commonjs ${defaultOverrides['styled-jsx/style']}`
     }
 
     const { res, isEsm } = resolveResult