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 💥
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

Author: huozhi

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, {

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

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', () => {

test/e2e/app-dir/mdx/public/test.jpg

@@ -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",