From 4a6b511ca0c4d21b994f179eddb30213314d8856 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 23 Apr 2024 13:37:49 +0200
Subject: [PATCH] Fix next/image usage in mdx (#64875)

### What

Apply the react aliases for app dir also to the files with
`pagesExtension`

### Why

In the page bundle of mdx page:

In RSC layer react is referencing to the insatlled react 18.2.0 's
`jsx-runtime` to create each JSX element. The react 18.2 JSX runtime
access `propTypes` of the component type and then it crashes :boom:
In RSC layer it should use the built-in react canary's `jsx-runtime`.

The reason that it didn't use the built-in one is we're using customized
`pageExtension` `["mdx"]` for mdx, where we didn't apply all these rules
for the files with `pageExtension`, but only the js and ts files by
default.

For mdx specifically, we cannot only applied to
`(page|layout|route).[page extension]` cause every mdx file needs to
have proper resolution. Since this doesn't break transform, it's safe to
apply for all files with page extension.

Fixes #58888

Closes NEXT-3187
---
 packages/next/src/build/webpack-config.ts |  11 +++++++----
 test/e2e/app-dir/mdx/app/image/page.mdx   |   7 +++++++
 test/e2e/app-dir/mdx/mdx.test.ts          |   7 +++++++
 test/e2e/app-dir/mdx/public/test.jpg      | Bin 0 -> 6765 bytes
 test/turbopack-build-tests-manifest.json  |   1 +
 5 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 test/e2e/app-dir/mdx/app/image/page.mdx
 create mode 100644 test/e2e/app-dir/mdx/public/test.jpg

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index 2afeab36080e1..8e41373005982 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -819,6 +819,7 @@ export default async function getBaseWebpackConfig(
   const shouldIncludeExternalDirs =
     config.experimental.externalDir || !!config.transpilePackages
 
+  const pageExtensionsRegex = new RegExp(`\\.(${pageExtensions.join('|')})$`)
   const codeCondition = {
     test: { or: [/\.(tsx|ts|js|cjs|mjs|jsx)$/, /__barrel_optimize__/] },
     ...(shouldIncludeExternalDirs
@@ -840,6 +841,8 @@ export default async function getBaseWebpackConfig(
     },
   }
 
+  const aliasCodeConditionTest = [codeCondition.test, pageExtensionsRegex]
+
   let webpackConfig: webpack.Configuration = {
     parallelism: Number(process.env.NEXT_WEBPACK_PARALLELISM) || undefined,
     ...(isNodeServer ? { externalsPresets: { node: true } } : {}),
@@ -1326,7 +1329,7 @@ export default async function getBaseWebpackConfig(
                   // Resolve it if it is a source code file, and it has NOT been
                   // opted out of bundling.
                   and: [
-                    codeCondition.test,
+                    aliasCodeConditionTest,
                     {
                       not: [optOutBundlingPackageRegex, asyncStoragesRegex],
                     },
@@ -1388,7 +1391,7 @@ export default async function getBaseWebpackConfig(
                       // Resolve it if it is a source code file, and it has NOT been
                       // opted out of bundling.
                       and: [
-                        codeCondition.test,
+                        aliasCodeConditionTest,
                         {
                           not: [optOutBundlingPackageRegex, asyncStoragesRegex],
                         },
@@ -1405,7 +1408,7 @@ export default async function getBaseWebpackConfig(
                     },
                   },
                   {
-                    test: codeCondition.test,
+                    test: aliasCodeConditionTest,
                     issuerLayer: WEBPACK_LAYERS.serverSideRendering,
                     resolve: {
                       alias: createRSCAliases(bundledReactChannel, {
@@ -1418,7 +1421,7 @@ export default async function getBaseWebpackConfig(
                 ],
               },
               {
-                test: codeCondition.test,
+                test: aliasCodeConditionTest,
                 issuerLayer: WEBPACK_LAYERS.appPagesBrowser,
                 resolve: {
                   alias: createRSCAliases(bundledReactChannel, {
diff --git a/test/e2e/app-dir/mdx/app/image/page.mdx b/test/e2e/app-dir/mdx/app/image/page.mdx
new file mode 100644
index 0000000000000..f85224c1ea1a9
--- /dev/null
+++ b/test/e2e/app-dir/mdx/app/image/page.mdx
@@ -0,0 +1,7 @@
+import Image from 'next/image'
+
+# Title
+
+This is a markdown page
+
+<Image src="/test.jpg" alt="Next.js Logo" width={180} height={37} />
diff --git a/test/e2e/app-dir/mdx/mdx.test.ts b/test/e2e/app-dir/mdx/mdx.test.ts
index 33dc0aea63ca4..099de81affc17 100644
--- a/test/e2e/app-dir/mdx/mdx.test.ts
+++ b/test/e2e/app-dir/mdx/mdx.test.ts
@@ -59,6 +59,13 @@ for (const type of [
           const $ = await next.render$('/')
           expect($('h2').text()).toBe('This is a client component')
         })
+
+        it('should work with next/image', async () => {
+          const $ = await next.render$('/image')
+          expect($('img').attr('src')).toBe(
+            '/_next/image?url=%2Ftest.jpg&w=384&q=75'
+          )
+        })
       })
 
       describe('pages directory', () => {
diff --git a/test/e2e/app-dir/mdx/public/test.jpg b/test/e2e/app-dir/mdx/public/test.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d536c882412ed3df0dc162823ca5146bcc033499
GIT binary patch
literal 6765
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

literal 0
HcmV?d00001

diff --git a/test/turbopack-build-tests-manifest.json b/test/turbopack-build-tests-manifest.json
index 587f6001606bf..796a7ee182863 100644
--- a/test/turbopack-build-tests-manifest.json
+++ b/test/turbopack-build-tests-manifest.json
@@ -1795,6 +1795,7 @@
         "mdx with-mdx-rs app directory should work in initial html with mdx import",
         "mdx with-mdx-rs app directory should work using browser",
         "mdx with-mdx-rs app directory should work using browser with mdx import",
+        "mdx with-mdx-rs app directory should work with next/image",
         "mdx with-mdx-rs pages directory should allow overriding components",
         "mdx with-mdx-rs pages directory should work in initial html",
         "mdx with-mdx-rs pages directory should work in initial html with mdx import",