Fix next/image usage in mdx #64875

huozhi · 2024-04-22T13:42:41Z

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

ijjk · 2024-04-22T13:46:13Z

Failing test suites

Commit: 3c17465

pnpm test-start test/production/graceful-shutdown/index.test.ts

Graceful Shutdown > production (standalone mode) > should not accept new requests during shutdown cleanup > when there is no activity

Expand output

● Graceful Shutdown › production (standalone mode) › should not accept new requests during shutdown cleanup › when there is no activity

expect(received).toBe(expected) // Object.is equality

Expected: 0
Received: null

  228 |         // App finally shuts down
  229 |         await appKilledPromise
> 230 |         expect(app.exitCode).toBe(0)
      |                              ^
  231 |       })
  232 |     })
  233 |   }

  at Object.toBe (production/graceful-shutdown/index.test.ts:230:30)

Read more about building and testing Next.js in contributing.md.

ijjk · 2024-04-22T13:51:49Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix/mdx-error	Change
buildDuration	14.3s	14.5s	⚠️ +164ms
buildDurationCached	7.8s	6.5s	N/A
nodeModulesSize	238 MB	238 MB	⚠️ +2.01 kB
nextStartRea..uration (ms)	383ms	381ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js fix/mdx-error	Change
2453-HASH.js gzip	31.5 kB	31.5 kB	N/A
3304.HASH.js gzip	169 B	169 B	✓
3f784ff6-HASH.js gzip	53.7 kB	53.7 kB	N/A
8299-HASH.js gzip	5.09 kB	5.1 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	227 B	227 B	✓
main-HASH.js gzip	29.6 kB	29.6 kB	N/A
webpack-HASH.js gzip	1.64 kB	1.65 kB	N/A
Overall change	45.6 kB	45.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix/mdx-error	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js fix/mdx-error	Change
_app-HASH.js gzip	193 B	194 B	N/A
_error-HASH.js gzip	193 B	191 B	N/A
amp-HASH.js gzip	510 B	510 B	✓
css-HASH.js gzip	342 B	343 B	N/A
dynamic-HASH.js gzip	2.51 kB	2.52 kB	N/A
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	365 B	364 B	N/A
hooks-HASH.js gzip	389 B	391 B	N/A
image-HASH.js gzip	4.28 kB	4.28 kB	N/A
index-HASH.js gzip	269 B	268 B	N/A
link-HASH.js gzip	2.68 kB	2.69 kB	N/A
routerDirect..HASH.js gzip	328 B	326 B	N/A
script-HASH.js gzip	395 B	397 B	N/A
withRouter-HASH.js gzip	323 B	323 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.2 kB	1.2 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix/mdx-error	Change
_buildManifest.js gzip	482 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix/mdx-error	Change
index.html gzip	529 B	530 B	N/A
link.html gzip	542 B	541 B	N/A
withRouter.html gzip	524 B	523 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js fix/mdx-error	Change
edge-ssr.js gzip	108 kB	108 kB	N/A
page.js gzip	3.05 kB	3.04 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js fix/mdx-error	Change
middleware-b..fest.js gzip	623 B	627 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	25.6 kB	25.6 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	839 B	839 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js fix/mdx-error	Change
app-page-exp...dev.js gzip	171 kB	171 kB	✓
app-page-exp..prod.js gzip	97.6 kB	97.6 kB	✓
app-page-tur..prod.js gzip	99.4 kB	99.4 kB	✓
app-page-tur..prod.js gzip	93.6 kB	93.6 kB	✓
app-page.run...dev.js gzip	145 kB	145 kB	✓
app-page.run..prod.js gzip	92.1 kB	92.1 kB	✓
app-route-ex...dev.js gzip	21.5 kB	21.5 kB	✓
app-route-ex..prod.js gzip	15.1 kB	15.1 kB	✓
app-route-tu..prod.js gzip	15.1 kB	15.1 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route.ru...dev.js gzip	21.2 kB	21.2 kB	✓
app-route.ru..prod.js gzip	14.9 kB	14.9 kB	✓
pages-api-tu..prod.js gzip	9.55 kB	9.55 kB	✓
pages-api.ru...dev.js gzip	9.82 kB	9.82 kB	✓
pages-api.ru..prod.js gzip	9.55 kB	9.55 kB	✓
pages-turbo...prod.js gzip	21.4 kB	21.4 kB	✓
pages.runtim...dev.js gzip	22.1 kB	22.1 kB	✓
pages.runtim..prod.js gzip	21.4 kB	21.4 kB	✓
server.runti..prod.js gzip	65.3 kB	65.3 kB	✓
Overall change	960 kB	960 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix/mdx-error	Change
0.pack gzip	1.59 MB	1.59 MB	N/A
index.pack gzip	107 kB	107 kB	⚠️ +666 B
Overall change	107 kB	107 kB	⚠️ +666 B

Diff details

Diff for middleware.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 1552: /***/ (
+    /***/ 4070: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(5237);
+          return __webpack_require__(396);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2016: /***/ (module, exports, __webpack_require__) => {
+    /***/ 8490: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(422)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6074)
+        __webpack_require__(2457)
       );
-      const _getimgprops = __webpack_require__(9571);
-      const _imageconfig = __webpack_require__(6567);
-      const _imageconfigcontextsharedruntime = __webpack_require__(419);
-      const _warnonce = __webpack_require__(4486);
-      const _routercontextsharedruntime = __webpack_require__(162);
+      const _getimgprops = __webpack_require__(7932);
+      const _imageconfig = __webpack_require__(5706);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9483);
+      const _warnonce = __webpack_require__(9035);
+      const _routercontextsharedruntime = __webpack_require__(4829);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -379,7 +379,7 @@
       /***/
     },
 
-    /***/ 9571: /***/ (
+    /***/ 7932: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -395,9 +395,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(4486);
-      const _imageblursvg = __webpack_require__(133);
-      const _imageconfig = __webpack_require__(6567);
+      const _warnonce = __webpack_require__(9035);
+      const _imageblursvg = __webpack_require__(2642);
+      const _imageconfig = __webpack_require__(5706);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -772,7 +772,7 @@
       /***/
     },
 
-    /***/ 133: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2642: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -827,7 +827,7 @@
       /***/
     },
 
-    /***/ 4085: /***/ (
+    /***/ 503: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -854,10 +854,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(7456);
-      const _getimgprops = __webpack_require__(9571);
-      const _imagecomponent = __webpack_require__(2016);
+      const _getimgprops = __webpack_require__(7932);
+      const _imagecomponent = __webpack_require__(8490);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -889,7 +889,7 @@
       /***/
     },
 
-    /***/ 6996: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7240: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -924,7 +924,7 @@
       /***/
     },
 
-    /***/ 5237: /***/ (
+    /***/ 396: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -941,8 +941,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1527);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
-      var next_image = __webpack_require__(1577);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
+      var next_image = __webpack_require__(73);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -972,12 +972,8 @@
       /***/
     },
 
-    /***/ 1577: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(4085);
+    /***/ 73: /***/ (module, __unused_webpack_exports, __webpack_require__) => {
+      module.exports = __webpack_require__(503);
 
       /***/
     },
@@ -987,7 +983,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(1552)
+      __webpack_exec__(4070)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 2453-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Commit: 3c17465

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

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

shuding · 2024-04-23T11:01:52Z

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

@@ -840,6 +841,8 @@ export default async function getBaseWebpackConfig(
    },
  }

+  const aliasCodeConditionTest = [codeCondition.test, pageExtensionsRegex]


Makes sense but why calling it alias-?

codeCodition.test are available for both webpack alias and transform rules, I created this one to imply that we only want to apply the webpack aliases for this group.

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

Fix next/image usage in mdx

7541101

ijjk added created-by: Next.js team PRs by the Next.js team tests type: next labels Apr 22, 2024

skip turbopack build

5bff68e

huozhi marked this pull request as ready for review April 22, 2024 13:53

huozhi requested review from timneutkens, ijjk, shuding, ztanner, feedthejim, a team, styfle and wyattjoh as code owners April 22, 2024 13:53

huozhi requested review from molebox and delbaoliveira and removed request for a team April 22, 2024 13:53

fix typo

70b20e1

styfle reviewed Apr 22, 2024

View reviewed changes

test/e2e/app-dir/mdx/mdx.test.ts Outdated Show resolved Hide resolved

use jpg

fbd1300

huozhi requested a review from styfle April 23, 2024 09:14

eps1lon reviewed Apr 23, 2024

View reviewed changes

packages/next/src/build/webpack-config.ts Outdated Show resolved Hide resolved

huozhi added 2 commits April 23, 2024 11:57

add dot

c165590

escape

3c17465

eps1lon approved these changes Apr 23, 2024

View reviewed changes

shuding approved these changes Apr 23, 2024

View reviewed changes

shuding reviewed Apr 23, 2024

View reviewed changes

huozhi merged commit 416cf45 into canary Apr 23, 2024
71 of 80 checks passed

huozhi deleted the fix/mdx-error branch April 23, 2024 11:37

github-actions bot added the locked label May 7, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix next/image usage in mdx #64875

Fix next/image usage in mdx #64875

huozhi commented Apr 22, 2024 •

edited

ijjk commented Apr 22, 2024 •

edited

ijjk commented Apr 22, 2024 •

edited

shuding Apr 23, 2024

huozhi Apr 23, 2024

Fix next/image usage in mdx #64875

Fix next/image usage in mdx #64875

Conversation

huozhi commented Apr 22, 2024 • edited

What

Why

ijjk commented Apr 22, 2024 • edited

Failing test suites

ijjk commented Apr 22, 2024 • edited

Stats from current PR

shuding Apr 23, 2024

Choose a reason for hiding this comment

huozhi Apr 23, 2024

Choose a reason for hiding this comment

huozhi commented Apr 22, 2024 •

edited

ijjk commented Apr 22, 2024 •

edited

ijjk commented Apr 22, 2024 •

edited