Skip to content

Commit 4a6b511

Browse files
committed
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
1 parent 04cc13c commit 4a6b511

File tree

5 files changed

+22
-4
lines changed

5 files changed

+22
-4
lines changed

packages/next/src/build/webpack-config.ts

+7-4
Original file line numberDiff line numberDiff line change
@@ -819,6 +819,7 @@ export default async function getBaseWebpackConfig(
819819
const shouldIncludeExternalDirs =
820820
config.experimental.externalDir || !!config.transpilePackages
821821

822+
const pageExtensionsRegex = new RegExp(`\\.(${pageExtensions.join('|')})$`)
822823
const codeCondition = {
823824
test: { or: [/\.(tsx|ts|js|cjs|mjs|jsx)$/, /__barrel_optimize__/] },
824825
...(shouldIncludeExternalDirs
@@ -840,6 +841,8 @@ export default async function getBaseWebpackConfig(
840841
},
841842
}
842843

844+
const aliasCodeConditionTest = [codeCondition.test, pageExtensionsRegex]
845+
843846
let webpackConfig: webpack.Configuration = {
844847
parallelism: Number(process.env.NEXT_WEBPACK_PARALLELISM) || undefined,
845848
...(isNodeServer ? { externalsPresets: { node: true } } : {}),
@@ -1326,7 +1329,7 @@ export default async function getBaseWebpackConfig(
13261329
// Resolve it if it is a source code file, and it has NOT been
13271330
// opted out of bundling.
13281331
and: [
1329-
codeCondition.test,
1332+
aliasCodeConditionTest,
13301333
{
13311334
not: [optOutBundlingPackageRegex, asyncStoragesRegex],
13321335
},
@@ -1388,7 +1391,7 @@ export default async function getBaseWebpackConfig(
13881391
// Resolve it if it is a source code file, and it has NOT been
13891392
// opted out of bundling.
13901393
and: [
1391-
codeCondition.test,
1394+
aliasCodeConditionTest,
13921395
{
13931396
not: [optOutBundlingPackageRegex, asyncStoragesRegex],
13941397
},
@@ -1405,7 +1408,7 @@ export default async function getBaseWebpackConfig(
14051408
},
14061409
},
14071410
{
1408-
test: codeCondition.test,
1411+
test: aliasCodeConditionTest,
14091412
issuerLayer: WEBPACK_LAYERS.serverSideRendering,
14101413
resolve: {
14111414
alias: createRSCAliases(bundledReactChannel, {
@@ -1418,7 +1421,7 @@ export default async function getBaseWebpackConfig(
14181421
],
14191422
},
14201423
{
1421-
test: codeCondition.test,
1424+
test: aliasCodeConditionTest,
14221425
issuerLayer: WEBPACK_LAYERS.appPagesBrowser,
14231426
resolve: {
14241427
alias: createRSCAliases(bundledReactChannel, {
+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Image from 'next/image'
2+
3+
# Title
4+
5+
This is a markdown page
6+
7+
<Image src="/test.jpg" alt="Next.js Logo" width={180} height={37} />

test/e2e/app-dir/mdx/mdx.test.ts

+7
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,13 @@ for (const type of [
5959
const $ = await next.render$('/')
6060
expect($('h2').text()).toBe('This is a client component')
6161
})
62+
63+
it('should work with next/image', async () => {
64+
const $ = await next.render$('/image')
65+
expect($('img').attr('src')).toBe(
66+
'/_next/image?url=%2Ftest.jpg&w=384&q=75'
67+
)
68+
})
6269
})
6370

6471
describe('pages directory', () => {

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

6.61 KB
Loading

test/turbopack-build-tests-manifest.json

+1
Original file line numberDiff line numberDiff line change
@@ -1795,6 +1795,7 @@
17951795
"mdx with-mdx-rs app directory should work in initial html with mdx import",
17961796
"mdx with-mdx-rs app directory should work using browser",
17971797
"mdx with-mdx-rs app directory should work using browser with mdx import",
1798+
"mdx with-mdx-rs app directory should work with next/image",
17981799
"mdx with-mdx-rs pages directory should allow overriding components",
17991800
"mdx with-mdx-rs pages directory should work in initial html",
18001801
"mdx with-mdx-rs pages directory should work in initial html with mdx import",

0 commit comments

Comments
 (0)