Fix: resolve mixed re-exports module as cjs #64681

huozhi · 2024-04-17T21:55:27Z

Why

If you have a client entry that mixing default re-export and * re-export, atm we cannot statically analyze all the exports from this the boundary, unless we can apply barrel file optimization for every import which could slow down speed.

// index.js
'use client'
export * from './client'
export { default } from './client'

Before that happen we high recommend you don't mixing that and try to add the client directive to the leaf level client module. We're not able to determine what the identifiers are imported from the wildcard import path. This would work if we resolved the actual file but currently we can't.

What

When we found the mixing client entry module like that, we treat it as a CJS client module and include all the bundle in client like before what we have the client components import optimization.

Ideally we could warn users don't apply the client directive to these kinda of barrel file, and only apply them to where we needed.

Fixes #64518
Closes NEXT-3119

ijjk · 2024-04-17T21:59:22Z

Tests Passed

ijjk · 2024-04-17T22:05:56Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix/client-components-tree-shaking-import-wildcard	Change
buildDuration	15s	15.1s	⚠️ +119ms
buildDurationCached	8.2s	7.1s	N/A
nodeModulesSize	199 MB	199 MB	⚠️ +8.47 kB
nextStartRea..uration (ms)	408ms	411ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js fix/client-components-tree-shaking-import-wildcard	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.1 kB	5.1 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	229 B	225 B	N/A
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.4 kB	45.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix/client-components-tree-shaking-import-wildcard	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/client-components-tree-shaking-import-wildcard	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	511 B	511 B	✓
css-HASH.js gzip	342 B	343 B	N/A
dynamic-HASH.js gzip	2.51 kB	2.51 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.21 kB	1.21 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix/client-components-tree-shaking-import-wildcard	Change
_buildManifest.js gzip	483 B	485 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix/client-components-tree-shaking-import-wildcard	Change
index.html gzip	529 B	530 B	N/A
link.html gzip	541 B	542 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/client-components-tree-shaking-import-wildcard	Change
edge-ssr.js gzip	94.5 kB	94.5 kB	N/A
page.js gzip	3.05 kB	3.05 kB	✓
Overall change	3.05 kB	3.05 kB	✓

Middleware size

	vercel/next.js canary	vercel/next.js fix/client-components-tree-shaking-import-wildcard	Change
middleware-b..fest.js gzip	625 B	625 B	✓
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	25.5 kB	25.5 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	1.46 kB	1.46 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js fix/client-components-tree-shaking-import-wildcard	Change
app-page-exp...dev.js gzip	171 kB	171 kB	✓
app-page-exp..prod.js gzip	97.5 kB	97.5 kB	✓
app-page-tur..prod.js gzip	99.2 kB	99.2 kB	✓
app-page-tur..prod.js gzip	93.5 kB	93.5 kB	✓
app-page.run...dev.js gzip	145 kB	145 kB	✓
app-page.run..prod.js gzip	92 kB	92 kB	✓
app-route-ex...dev.js gzip	21.5 kB	21.5 kB	✓
app-route-ex..prod.js gzip	15.2 kB	15.2 kB	✓
app-route-tu..prod.js gzip	15.2 kB	15.2 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route.ru...dev.js gzip	21.1 kB	21.1 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	51.6 kB	51.6 kB	✓
Overall change	945 kB	945 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix/client-components-tree-shaking-import-wildcard	Change
0.pack gzip	1.6 MB	1.59 MB	N/A
index.pack gzip	107 kB	107 kB	⚠️ +697 B
Overall change	107 kB	107 kB	⚠️ +697 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__(2430);
-      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: 5ee946e

test/production/app-dir/client-components-tree-shaking/app/client-reexport-index/page.js

### What * Remove the change added in #64467, but still kept tests. * Add more tests for mixed imports (component and function) from shared component with `optimizePackageImports` ### Why The fix in #64467 was not correct, as mixing `export *` with `"use client"` should error if Next.js detect it properly. When there's mixed exports, that a shared function will become a client reference if the target file inherits the client boundary. The original issue #64467 fixed was actually related to tree-shaking, which is fixed in #64681. Closes NEXT-3197

### Why If you have a client entry that mixing `default` re-export and `*` re-export, atm we cannot statically analyze all the exports from this the boundary, unless we can apply barrel file optimization for every import which could slow down speed. ```js // index.js 'use client' export * from './client' export { default } from './client' ``` Before that happen we high recommend you don't mixing that and try to add the client directive to the leaf level client module. We're not able to determine what the identifiers are imported from the wildcard import path. This would work if we resolved the actual file but currently we can't. ### What When we found the mixing client entry module like that, we treat it as a CJS client module and include all the bundle in client like before what we have the client components import optimization. Ideally we could warn users don't apply the client directive to these kinda of barrel file, and only apply them to where we needed. Fixes #64518 Closes NEXT-3119

### What * Remove the change added in #64467, but still kept tests. * Add more tests for mixed imports (component and function) from shared component with `optimizePackageImports` ### Why The fix in #64467 was not correct, as mixing `export *` with `"use client"` should error if Next.js detect it properly. When there's mixed exports, that a shared function will become a client reference if the target file inherits the client boundary. The original issue #64467 fixed was actually related to tree-shaking, which is fixed in #64681. Closes NEXT-3197

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

huozhi added 7 commits April 18, 2024 00:41

repro

d129b76

Resolve mix reexports module as cjs

7ffb9e8

rm extra props

c504276

rm *

e25d24d

fix

1213e1e

keep esm mark and typeof

b1aa790

set * when auto

5ee946e

huozhi force-pushed the fix/client-components-tree-shaking-import-wildcard branch from 94a5433 to 5ee946e Compare April 17, 2024 22:48

huozhi marked this pull request as ready for review April 17, 2024 22:59

huozhi requested review from timneutkens, ijjk, shuding, ztanner, feedthejim, a team and wyattjoh as code owners April 17, 2024 23:00

shuding reviewed Apr 17, 2024

View reviewed changes

test/production/app-dir/client-components-tree-shaking/app/client-reexport-index/page.js Show resolved Hide resolved

shuding approved these changes Apr 17, 2024

View reviewed changes

huozhi merged commit 81defe2 into canary Apr 17, 2024
75 of 80 checks passed

huozhi deleted the fix/client-components-tree-shaking-import-wildcard branch April 17, 2024 23:06

This was referenced Apr 17, 2024

v14.2 causing build error for Material UI Icons #64518

Closed

Fix client boundary inheritance for barrel optimization #64467

Merged

Fix mixed exports in server component with barrel optimization #64894

Merged

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: resolve mixed re-exports module as cjs #64681

Fix: resolve mixed re-exports module as cjs #64681

huozhi commented Apr 17, 2024 •

edited

Loading

ijjk commented Apr 17, 2024 •

edited

Loading

ijjk commented Apr 17, 2024 •

edited

Loading

Fix: resolve mixed re-exports module as cjs #64681

Fix: resolve mixed re-exports module as cjs #64681

Conversation

huozhi commented Apr 17, 2024 • edited Loading

Why

What

ijjk commented Apr 17, 2024 • edited Loading

Tests Passed

ijjk commented Apr 17, 2024 • edited Loading

Stats from current PR

huozhi commented Apr 17, 2024 •

edited

Loading

ijjk commented Apr 17, 2024 •

edited

Loading

ijjk commented Apr 17, 2024 •

edited

Loading