From 5411c41419a6f9da978aab6cf05d64a9f88c163b Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 12 Jan 2024 13:57:22 +0100
Subject: [PATCH 1/4] Fix react-refresh for transpiled packages

---
 packages/next/src/build/webpack-config.ts      | 18 ++++++++++++++++--
 .../app-dir/app-external/app-external.test.ts  |  6 +++++-
 .../app-external/app/cjs/client/page.js        |  3 ++-
 test/e2e/app-dir/app-external/next.config.js   |  2 +-
 .../transpile-cjs-lib/index.js                 |  1 +
 .../transpile-cjs-lib/package.json             |  5 +++++
 .../index.ts                                   |  0
 .../transpile-ts-lib/package.json              |  4 ++++
 .../untranspiled-module/package.json           |  4 ----
 9 files changed, 34 insertions(+), 9 deletions(-)
 create mode 100644 test/e2e/app-dir/app-external/node_modules_bak/transpile-cjs-lib/index.js
 create mode 100644 test/e2e/app-dir/app-external/node_modules_bak/transpile-cjs-lib/package.json
 rename test/e2e/app-dir/app-external/node_modules_bak/{untranspiled-module => transpile-ts-lib}/index.ts (100%)
 create mode 100644 test/e2e/app-dir/app-external/node_modules_bak/transpile-ts-lib/package.json
 delete mode 100644 test/e2e/app-dir/app-external/node_modules_bak/untranspiled-module/package.json

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index 57f14bdbb0ee3..51aecafe67ec5 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -781,6 +781,12 @@ export default async function getBaseWebpackConfig(
       .join('|')})[/\\\\]`
   )
 
+  const transpilePackagesRegex = new RegExp(
+    `[/\\\\]node_modules[/\\\\](${config.transpilePackages
+      ?.map((p) => p.replace(/\//g, '[/\\\\]'))
+      .join('|')})[/\\\\]`
+  )
+
   const handleExternals = makeExternalHandler({
     config,
     optOutBundlingPackages,
@@ -1397,8 +1403,16 @@ export default async function getBaseWebpackConfig(
         ...(hasAppDir && dev && isClient
           ? [
               {
-                test: codeCondition.test,
-                exclude: codeCondition.exclude,
+                test: {
+                  and: [
+                    codeCondition.test,
+                    {
+                      not: [transpilePackagesRegex],
+                    },
+                  ],
+                },
+
+                exclude: [codeCondition.exclude],
                 issuerLayer: WEBPACK_LAYERS.appPagesBrowser,
                 use: reactRefreshLoaders,
                 resolve: {
diff --git a/test/e2e/app-dir/app-external/app-external.test.ts b/test/e2e/app-dir/app-external/app-external.test.ts
index 479e8f2fba71b..91539a5e6ce3d 100644
--- a/test/e2e/app-dir/app-external/app-external.test.ts
+++ b/test/e2e/app-dir/app-external/app-external.test.ts
@@ -1,5 +1,5 @@
 import { createNextDescribe } from 'e2e-utils'
-import { check, shouldRunTurboDevTest } from 'next-test-utils'
+import { check, hasRedbox, shouldRunTurboDevTest } from 'next-test-utils'
 
 async function resolveStreamResponse(response: any, onData?: any) {
   let result = ''
@@ -229,6 +229,10 @@ createNextDescribe(
     it('should emit cjs helpers for external cjs modules when compiled', async () => {
       const $ = await next.render$('/cjs/client')
       expect($('#private-prop').text()).toBe('prop')
+      expect($('#transpile-cjs-lib').text()).toBe('transpile-cjs-lib')
+
+      const browser = await next.browser('/cjs/client')
+      expect(await hasRedbox(browser)).toBe(false)
     })
 
     it('should export client module references in esm', async () => {
diff --git a/test/e2e/app-dir/app-external/app/cjs/client/page.js b/test/e2e/app-dir/app-external/app/cjs/client/page.js
index 4cac50381034b..9fc1da8f74ae5 100644
--- a/test/e2e/app-dir/app-external/app/cjs/client/page.js
+++ b/test/e2e/app-dir/app-external/app/cjs/client/page.js
@@ -1,11 +1,12 @@
 'use client'
 
 import { instance } from 'cjs-modern-syntax'
-
+import { packageName } from 'test/e2e/app-dir/app-external/node_modules_bak/transpile-cjs-lib'
 export default function Page() {
   return (
     <>
       <div id="private-prop">{instance.getProp()}</div>
+      <div id="transpile-cjs-lib">{packageName}</div>
     </>
   )
 }
diff --git a/test/e2e/app-dir/app-external/next.config.js b/test/e2e/app-dir/app-external/next.config.js
index 4b1cb6524d198..8ea72b2909c2f 100644
--- a/test/e2e/app-dir/app-external/next.config.js
+++ b/test/e2e/app-dir/app-external/next.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   reactStrictMode: true,
-  transpilePackages: ['untranspiled-module', 'css', 'font'],
+  transpilePackages: ['css', 'font', 'transpile-ts-lib', 'transpile-cjs-lib'],
   experimental: {
     serverComponentsExternalPackages: [
       'conditional-exports-optout',
diff --git a/test/e2e/app-dir/app-external/node_modules_bak/transpile-cjs-lib/index.js b/test/e2e/app-dir/app-external/node_modules_bak/transpile-cjs-lib/index.js
new file mode 100644
index 0000000000000..f6299fd40fb02
--- /dev/null
+++ b/test/e2e/app-dir/app-external/node_modules_bak/transpile-cjs-lib/index.js
@@ -0,0 +1 @@
+exports.packageName = 'transpile-cjs-lib'
diff --git a/test/e2e/app-dir/app-external/node_modules_bak/transpile-cjs-lib/package.json b/test/e2e/app-dir/app-external/node_modules_bak/transpile-cjs-lib/package.json
new file mode 100644
index 0000000000000..797dfef9dbae7
--- /dev/null
+++ b/test/e2e/app-dir/app-external/node_modules_bak/transpile-cjs-lib/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "transpile-cjs-lib",
+  "type": "commonjs",
+  "exports": "./index.js"
+}
diff --git a/test/e2e/app-dir/app-external/node_modules_bak/untranspiled-module/index.ts b/test/e2e/app-dir/app-external/node_modules_bak/transpile-ts-lib/index.ts
similarity index 100%
rename from test/e2e/app-dir/app-external/node_modules_bak/untranspiled-module/index.ts
rename to test/e2e/app-dir/app-external/node_modules_bak/transpile-ts-lib/index.ts
diff --git a/test/e2e/app-dir/app-external/node_modules_bak/transpile-ts-lib/package.json b/test/e2e/app-dir/app-external/node_modules_bak/transpile-ts-lib/package.json
new file mode 100644
index 0000000000000..10f78610dabf1
--- /dev/null
+++ b/test/e2e/app-dir/app-external/node_modules_bak/transpile-ts-lib/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "transpile-ts-lib",
+  "main": "index.ts"
+}
diff --git a/test/e2e/app-dir/app-external/node_modules_bak/untranspiled-module/package.json b/test/e2e/app-dir/app-external/node_modules_bak/untranspiled-module/package.json
deleted file mode 100644
index 05558992ba58e..0000000000000
--- a/test/e2e/app-dir/app-external/node_modules_bak/untranspiled-module/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "untranspiled-module",
-  "main": "index.ts"
-}

From 22280bb62496787348eef3b8d6520d7eed3fd32b Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 12 Jan 2024 14:12:25 +0100
Subject: [PATCH 2/4] fix import

---
 test/e2e/app-dir/app-external/app/cjs/client/page.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/e2e/app-dir/app-external/app/cjs/client/page.js b/test/e2e/app-dir/app-external/app/cjs/client/page.js
index 9fc1da8f74ae5..7f447d6adf7a8 100644
--- a/test/e2e/app-dir/app-external/app/cjs/client/page.js
+++ b/test/e2e/app-dir/app-external/app/cjs/client/page.js
@@ -1,7 +1,8 @@
 'use client'
 
 import { instance } from 'cjs-modern-syntax'
-import { packageName } from 'test/e2e/app-dir/app-external/node_modules_bak/transpile-cjs-lib'
+import { packageName } from 'transpile-cjs-lib'
+
 export default function Page() {
   return (
     <>

From 8d1011dc9069541a9d52f29ce16dccbb7cb976f4 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 12 Jan 2024 14:16:16 +0100
Subject: [PATCH 3/4] fix test

---
 .../app-dir/app-external/app/external-imports/client/page.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/app-dir/app-external/app/external-imports/client/page.js b/test/e2e/app-dir/app-external/app/external-imports/client/page.js
index 183053587e181..1634c20f8a2ce 100644
--- a/test/e2e/app-dir/app-external/app/external-imports/client/page.js
+++ b/test/e2e/app-dir/app-external/app/external-imports/client/page.js
@@ -2,7 +2,7 @@
 
 import getType, { named, value, array, obj } from 'non-isomorphic-text'
 
-import add from 'untranspiled-module'
+import add from 'transpile-ts-lib'
 
 // ESM externals has react has a peer dependency
 import useSWR from 'swr'

From 61d5523a0356227a176979290aae67d0386e43bb Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 12 Jan 2024 16:48:42 +0100
Subject: [PATCH 4/4] simplify

---
 packages/next/src/build/webpack-config.ts | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index 51aecafe67ec5..babf77f95786d 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -1403,16 +1403,8 @@ export default async function getBaseWebpackConfig(
         ...(hasAppDir && dev && isClient
           ? [
               {
-                test: {
-                  and: [
-                    codeCondition.test,
-                    {
-                      not: [transpilePackagesRegex],
-                    },
-                  ],
-                },
-
-                exclude: [codeCondition.exclude],
+                test: codeCondition.test,
+                exclude: [codeCondition.exclude, transpilePackagesRegex],
                 issuerLayer: WEBPACK_LAYERS.appPagesBrowser,
                 use: reactRefreshLoaders,
                 resolve: {