diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts index 9816b5ebb41c9..78fead737a522 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 + +Next.js Logo 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 0000000000000..d536c882412ed Binary files /dev/null and b/test/e2e/app-dir/mdx/public/test.jpg differ diff --git a/test/turbopack-build-tests-manifest.json b/test/turbopack-build-tests-manifest.json index 3a1de49f3cdd8..9f879798c544f 100644 --- a/test/turbopack-build-tests-manifest.json +++ b/test/turbopack-build-tests-manifest.json @@ -1793,6 +1793,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",