Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved modularizeImports rules #53051

Merged
merged 8 commits into from
Jul 27, 2023
Merged

Improved modularizeImports rules #53051

merged 8 commits into from
Jul 27, 2023

Conversation

shuding
Copy link
Member

@shuding shuding commented Jul 22, 2023

This PR adds some improved modularizeImports rules to ensure that some of the popular UI libraries (mostly icons) can be correctly optimized instead of creating thousands of modules. Here's an example of applying this to lucide-react:

CleanShot 2023-07-22 at 19 34 15@2x

With swc-project/plugins#196 being landed, we can add different transform rules for specific names in the import. For example, for lucide-react there're now 3 transforms:

  • 'Lucide(.*)': ...
  • '(.*)Icon': ...
  • '*': ...

On top of that, another critical change made in this PR is the introducing of modularize-import-loader. With this new loader, we can delegate the task of re-exporting the value to Webpack, where we can adjust the type of the export and the target path. This is very necessary and can't be done in SWC alone because libs like lucide-react is using .mjs and don't have exports values for the individual icons in the package.json files.

Because of that, if we simply transform the expression to import Icon from 'lucide-react/esm/icons/foo it will fail because:

  1. It's missing a .mjs extension
  2. It doesn't have /esm/icons/foo.mjs in package.json exports

For 1), in fact that they moved to .mjs only in a recent upgrade so we can't even hard code it to be .mjs in the transform (breaks old versions).

Because of all the above, I decided to go with Webpack's own resolution logic with the loader as a temporary solution. It's temporary because it's still assuming that the file structure of these libs doesn't change.

Fixes #52307, #52518.

@ijjk ijjk added area: tests Turbopack Related to Turbopack with Next.js. created-by: Next.js team PRs by the Next.js team. type: next labels Jul 22, 2023
@ijjk
Copy link
Member

ijjk commented Jul 22, 2023

Tests Passed

@ijjk
Copy link
Member

ijjk commented Jul 22, 2023

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js shu/254c Change
buildDuration 46.6s 43s -3.6s
buildDurationCached 20.2s 18.4s -1.8s
nodeModulesSize 137 MB 137 MB ⚠️ +19.5 kB
nextStartRea..uration (ms) 567ms 580ms ⚠️ +13ms
Client Bundles (main, webpack) Overall decrease ✓
vercel/next.js canary vercel/next.js shu/254c Change
35a5f01f-HASH.js gzip 50.5 kB 50.5 kB
446.HASH.js gzip 185 B 181 B -4 B
98-HASH.js gzip 25.7 kB 25.7 kB -16 B
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 217 B 216 B -1 B
main-HASH.js gzip 28.6 kB 28.6 kB ⚠️ +9 B
webpack-HASH.js gzip 1.7 kB 1.7 kB ⚠️ +2 B
Overall change 152 kB 152 kB -10 B
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js shu/254c Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall decrease ✓
vercel/next.js canary vercel/next.js shu/254c Change
_app-HASH.js gzip 195 B 195 B
_error-HASH.js gzip 182 B 182 B
amp-HASH.js gzip 504 B 503 B -1 B
css-HASH.js gzip 321 B 322 B ⚠️ +1 B
dynamic-HASH.js gzip 2.5 kB 2.5 kB -3 B
edge-ssr-HASH.js gzip 256 B 255 B -1 B
head-HASH.js gzip 350 B 349 B -1 B
hooks-HASH.js gzip 368 B 369 B ⚠️ +1 B
image-HASH.js gzip 4.27 kB 4.27 kB ⚠️ +2 B
index-HASH.js gzip 255 B 256 B ⚠️ +1 B
link-HASH.js gzip 2.62 kB 2.62 kB -4 B
routerDirect..HASH.js gzip 312 B 313 B ⚠️ +1 B
script-HASH.js gzip 384 B 385 B ⚠️ +1 B
withRouter-HASH.js gzip 308 B 309 B ⚠️ +1 B
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 12.9 kB 12.9 kB -2 B
Client Build Manifests Overall decrease ✓
vercel/next.js canary vercel/next.js shu/254c Change
_buildManifest.js gzip 485 B 480 B -5 B
Overall change 485 B 480 B -5 B
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary vercel/next.js shu/254c Change
index.html gzip 512 B 511 B -1 B
link.html gzip 527 B 526 B -1 B
withRouter.html gzip 506 B 505 B -1 B
Overall change 1.54 kB 1.54 kB -3 B
Edge SSR bundle Size Overall increase ⚠️
vercel/next.js canary vercel/next.js shu/254c Change
edge-ssr.js gzip 88.6 kB 88.9 kB ⚠️ +275 B
page.js gzip 146 kB 146 kB ⚠️ +287 B
Overall change 235 kB 235 kB ⚠️ +562 B
Middleware size Overall decrease ✓
vercel/next.js canary vercel/next.js shu/254c Change
middleware-b..fest.js gzip 625 B 622 B -3 B
middleware-r..fest.js gzip 151 B 151 B
middleware.js gzip 26 kB 16.8 kB -9.22 kB
edge-runtime..pack.js gzip 1.83 kB 1.83 kB
Overall change 28.6 kB 19.4 kB -9.23 kB

Diffs

Diff for page.js

Diff too large to display

Diff for middleware-b..-manifest.js
@@ -7,96 +7,96 @@ self.__BUILD_MANIFEST = {
     "static/BUILD_ID/_ssgManifest.js",
   ],
   rootMainFiles: [
-    "static/chunks/webpack-b6c94c729e6804bb.js",
-    "static/chunks/35a5f01f-5c9989672264be1c.js",
-    "static/chunks/98-f16c9259509ec182.js",
-    "static/chunks/main-app-3e77e6a5de602e64.js",
+    "static/chunks/webpack-917c5126fa399878.js",
+    "static/chunks/9ace19b1-d5b4f46ecfecaeb7.js",
+    "static/chunks/819-4bed39c789866444.js",
+    "static/chunks/main-app-dd4957cb1e97628d.js",
   ],
   pages: {
     "/": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
-      "static/chunks/pages/index-b3eeca82dc15d3ca.js",
+      "static/chunks/main-8ac420977d9105ec.js",
+      "static/chunks/pages/index-94016d70d7482fe7.js",
     ],
     "/_app": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
-      "static/chunks/pages/_app-7ba896576f11cc13.js",
+      "static/chunks/main-8ac420977d9105ec.js",
+      "static/chunks/pages/_app-46cf6cb90b19c472.js",
     ],
     "/_error": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
-      "static/chunks/pages/_error-95fd436e01e410ce.js",
+      "static/chunks/main-8ac420977d9105ec.js",
+      "static/chunks/pages/_error-a56f0e852cd19c98.js",
     ],
     "/amp": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
-      "static/chunks/pages/amp-f480a7f42402bc6b.js",
+      "static/chunks/main-8ac420977d9105ec.js",
+      "static/chunks/pages/amp-8c903ea74383c3c2.js",
     ],
     "/css": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
+      "static/chunks/main-8ac420977d9105ec.js",
       "static/css/ded6b86ab9cc0a1f.css",
-      "static/chunks/pages/css-6cba698e124cc650.js",
+      "static/chunks/pages/css-0d504051a85f0fe7.js",
     ],
     "/dynamic": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
-      "static/chunks/pages/dynamic-1cd0163617ec6914.js",
+      "static/chunks/main-8ac420977d9105ec.js",
+      "static/chunks/pages/dynamic-c49fc16237dca2a5.js",
     ],
     "/edge-ssr": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
-      "static/chunks/pages/edge-ssr-845a7224bdb4411b.js",
+      "static/chunks/main-8ac420977d9105ec.js",
+      "static/chunks/pages/edge-ssr-5745a64fa421cb05.js",
     ],
     "/head": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
-      "static/chunks/pages/head-542d60b8442e93ee.js",
+      "static/chunks/main-8ac420977d9105ec.js",
+      "static/chunks/pages/head-d93013a29556304c.js",
     ],
     "/hooks": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
-      "static/chunks/pages/hooks-e82577e955d3ddd0.js",
+      "static/chunks/main-8ac420977d9105ec.js",
+      "static/chunks/pages/hooks-78c139c1b3a7077d.js",
     ],
     "/image": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
-      "static/chunks/pages/image-2d6e419f79037e7e.js",
+      "static/chunks/main-8ac420977d9105ec.js",
+      "static/chunks/pages/image-11c16bf6265369a7.js",
     ],
     "/link": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
-      "static/chunks/pages/link-c0ec4cd09f99730f.js",
+      "static/chunks/main-8ac420977d9105ec.js",
+      "static/chunks/pages/link-07c1abec25dfa204.js",
     ],
     "/routerDirect": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
-      "static/chunks/pages/routerDirect-a4378fdd445a6dba.js",
+      "static/chunks/main-8ac420977d9105ec.js",
+      "static/chunks/pages/routerDirect-21980ec88959c07d.js",
     ],
     "/script": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
-      "static/chunks/pages/script-0c22bdc31d7a54f9.js",
+      "static/chunks/main-8ac420977d9105ec.js",
+      "static/chunks/pages/script-4ac368a5fe7f6515.js",
     ],
     "/withRouter": [
-      "static/chunks/webpack-b6c94c729e6804bb.js",
+      "static/chunks/webpack-917c5126fa399878.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-20f637a500422b12.js",
-      "static/chunks/pages/withRouter-1c13d6b4c43864b1.js",
+      "static/chunks/main-8ac420977d9105ec.js",
+      "static/chunks/pages/withRouter-cd6c8ed384d35879.js",
     ],
   },
   ampFirstPages: [],
Diff for middleware-r..-manifest.js
@@ -1,2 +1,2 @@
 self.__REACT_LOADABLE_MANIFEST =
-  '{"dynamic.js -> ../components/hello":{"id":3446,"files":["static/chunks/446.36d8405b831b4d8d.js"]}}';
+  '{"dynamic.js -> ../components/hello":{"id":8574,"files":["static/chunks/574.6ec7ce57fcf094de.js"]}}';
Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for _buildManifest.js
@@ -1,28 +1,28 @@
 self.__BUILD_MANIFEST = {
   __rewrites: { afterFiles: [], beforeFiles: [], fallback: [] },
-  "/": ["static\u002Fchunks\u002Fpages\u002Findex-b3eeca82dc15d3ca.js"],
-  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-95fd436e01e410ce.js"],
-  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-f480a7f42402bc6b.js"],
+  "/": ["static\u002Fchunks\u002Fpages\u002Findex-94016d70d7482fe7.js"],
+  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-a56f0e852cd19c98.js"],
+  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-8c903ea74383c3c2.js"],
   "/css": [
     "static\u002Fcss\u002Fded6b86ab9cc0a1f.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-6cba698e124cc650.js",
+    "static\u002Fchunks\u002Fpages\u002Fcss-0d504051a85f0fe7.js",
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-1cd0163617ec6914.js",
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-c49fc16237dca2a5.js",
   ],
   "/edge-ssr": [
-    "static\u002Fchunks\u002Fpages\u002Fedge-ssr-845a7224bdb4411b.js",
+    "static\u002Fchunks\u002Fpages\u002Fedge-ssr-5745a64fa421cb05.js",
   ],
-  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-542d60b8442e93ee.js"],
-  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-e82577e955d3ddd0.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-2d6e419f79037e7e.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-c0ec4cd09f99730f.js"],
+  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-d93013a29556304c.js"],
+  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-78c139c1b3a7077d.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-11c16bf6265369a7.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-07c1abec25dfa204.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-a4378fdd445a6dba.js",
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-21980ec88959c07d.js",
   ],
-  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-0c22bdc31d7a54f9.js"],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-4ac368a5fe7f6515.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-1c13d6b4c43864b1.js",
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-cd6c8ed384d35879.js",
   ],
   sortedPages: [
     "\u002F",
Diff for _app-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [888],
   {
-    /***/ 2190: /***/ function (
+    /***/ 1113: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_app",
         function () {
-          return __webpack_require__(783);
+          return __webpack_require__(6355);
         },
       ]);
       if (false) {
@@ -24,7 +24,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 179], function () {
-      return __webpack_exec__(2190), __webpack_exec__(5761);
+      return __webpack_exec__(1113), __webpack_exec__(3103);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for _error-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [820],
   {
-    /***/ 5374: /***/ function (
+    /***/ 3363: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_error",
         function () {
-          return __webpack_require__(4218);
+          return __webpack_require__(6178);
         },
       ]);
       if (false) {
@@ -24,7 +24,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function () {
-      return __webpack_exec__(5374);
+      return __webpack_exec__(3363);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for amp-HASH.js
@@ -1,17 +1,17 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [216],
   {
-    /***/ 8510: /***/ function (
+    /***/ 8753: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(8170);
+      module.exports = __webpack_require__(811);
 
       /***/
     },
 
-    /***/ 7010: /***/ function (
+    /***/ 5348: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -19,7 +19,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/amp",
         function () {
-          return __webpack_require__(2583);
+          return __webpack_require__(7226);
         },
       ]);
       if (false) {
@@ -28,7 +28,7 @@
       /***/
     },
 
-    /***/ 8170: /***/ function (module, exports, __webpack_require__) {
+    /***/ 811: /***/ function (module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -44,8 +44,8 @@
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(959)
       );
-      const _ampcontext = __webpack_require__(4428);
-      const _ampmode = __webpack_require__(9404);
+      const _ampcontext = __webpack_require__(1911);
+      const _ampmode = __webpack_require__(8505);
       function useAmp() {
         // Don't assign the context value to a variable to save bytes
         return (0, _ampmode.isInAmpMode)(
@@ -67,7 +67,7 @@
       /***/
     },
 
-    /***/ 2583: /***/ function (
+    /***/ 7226: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -84,7 +84,7 @@
         /* harmony export */
       });
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(8510);
+        __webpack_require__(8753);
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_amp__WEBPACK_IMPORTED_MODULE_0__
@@ -108,7 +108,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function () {
-      return __webpack_exec__(7010);
+      return __webpack_exec__(5348);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for css-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [706],
   {
-    /***/ 860: /***/ function (
+    /***/ 6437: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/css",
         function () {
-          return __webpack_require__(3511);
+          return __webpack_require__(7123);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 3511: /***/ function (
+    /***/ 7123: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -28,7 +28,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(4107);
+        __webpack_require__(3234);
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -48,7 +48,7 @@
       /***/
     },
 
-    /***/ 4107: /***/ function (module) {
+    /***/ 3234: /***/ function (module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__aUdUq" };
 
@@ -61,7 +61,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(860);
+      return __webpack_exec__(6437);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for dynamic-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [739],
   {
-    /***/ 3995: /***/ function (
+    /***/ 7753: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/dynamic",
         function () {
-          return __webpack_require__(8661);
+          return __webpack_require__(3245);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2831: /***/ function (module, exports, __webpack_require__) {
+    /***/ 4727: /***/ function (module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -45,7 +45,7 @@
         __webpack_require__(959)
       );
       const _loadable = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8539)
+        __webpack_require__(7666)
       );
       const isServerSide = "object" === "undefined";
       // Normalize loader to return the module as form { default: Component } for `React.lazy`.
@@ -146,7 +146,7 @@
       /***/
     },
 
-    /***/ 5242: /***/ function (
+    /***/ 1591: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -173,7 +173,7 @@
       /***/
     },
 
-    /***/ 8539: /***/ function (
+    /***/ 7666: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -215,7 +215,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(959)
       );
-      const _loadablecontext = __webpack_require__(5242);
+      const _loadablecontext = __webpack_require__(1591);
       function resolve(obj) {
         return obj && obj.default ? obj.default : obj;
       }
@@ -450,7 +450,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /***/
     },
 
-    /***/ 8661: /***/ function (
+    /***/ 3245: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -466,7 +466,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(6113);
+        __webpack_require__(2677);
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_dynamic__WEBPACK_IMPORTED_MODULE_1__
@@ -475,11 +475,11 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       const DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
         () =>
           __webpack_require__
-            .e(/* import() */ 446)
-            .then(__webpack_require__.bind(__webpack_require__, 3446)),
+            .e(/* import() */ 574)
+            .then(__webpack_require__.bind(__webpack_require__, 8574)),
         {
           loadableGenerated: {
-            webpack: () => [/*require.resolve*/ 3446],
+            webpack: () => [/*require.resolve*/ 8574],
           },
         }
       );
@@ -506,12 +506,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /***/
     },
 
-    /***/ 6113: /***/ function (
+    /***/ 2677: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(2831);
+      module.exports = __webpack_require__(4727);
 
       /***/
     },
@@ -522,7 +522,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(3995);
+      return __webpack_exec__(7753);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for edge-ssr-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [800],
   {
-    /***/ 6219: /***/ function (
+    /***/ 6027: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/edge-ssr",
         function () {
-          return __webpack_require__(2230);
+          return __webpack_require__(9170);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2230: /***/ function (
+    /***/ 9170: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -48,7 +48,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function () {
-      return __webpack_exec__(6219);
+      return __webpack_exec__(6027);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for head-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [645],
   {
-    /***/ 2899: /***/ function (
+    /***/ 6955: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/head",
         function () {
-          return __webpack_require__(4202);
+          return __webpack_require__(792);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 4202: /***/ function (
+    /***/ 792: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -34,7 +34,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(8412);
+        __webpack_require__(9046);
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_head__WEBPACK_IMPORTED_MODULE_1__
@@ -68,12 +68,12 @@
       /***/
     },
 
-    /***/ 8412: /***/ function (
+    /***/ 9046: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3373);
+      module.exports = __webpack_require__(2285);
 
       /***/
     },
@@ -84,7 +84,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(2899);
+      return __webpack_exec__(6955);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for hooks-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [757],
   {
-    /***/ 2304: /***/ function (
+    /***/ 7819: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/hooks",
         function () {
-          return __webpack_require__(1716);
+          return __webpack_require__(3898);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 1716: /***/ function (
+    /***/ 3898: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -79,7 +79,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(2304);
+      return __webpack_exec__(7819);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for image-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [358],
   {
-    /***/ 5885: /***/ function (
+    /***/ 801: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(7141);
+          return __webpack_require__(7330);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 645: /***/ function (module, exports, __webpack_require__) {
+    /***/ 3727: /***/ function (module, exports, __webpack_require__) {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -37,15 +37,15 @@
       );
       const _reactdom = __webpack_require__(422);
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3373)
+        __webpack_require__(2285)
       );
-      const _getimgprops = __webpack_require__(9671);
-      const _imageconfig = __webpack_require__(7497);
-      const _imageconfigcontext = __webpack_require__(4281);
-      const _warnonce = __webpack_require__(130);
-      const _routercontext = __webpack_require__(4700);
+      const _getimgprops = __webpack_require__(4813);
+      const _imageconfig = __webpack_require__(6330);
+      const _imageconfigcontext = __webpack_require__(4883);
+      const _warnonce = __webpack_require__(114);
+      const _routercontext = __webpack_require__(4918);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3545)
+        __webpack_require__(4317)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -370,7 +370,7 @@
       /***/
     },
 
-    /***/ 9671: /***/ function (
+    /***/ 4813: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -386,9 +386,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(130);
-      const _imageblursvg = __webpack_require__(4890);
-      const _imageconfig = __webpack_require__(7497);
+      const _warnonce = __webpack_require__(114);
+      const _imageblursvg = __webpack_require__(7318);
+      const _imageconfig = __webpack_require__(6330);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -753,7 +753,7 @@
       /***/
     },
 
-    /***/ 4890: /***/ function (__unused_webpack_module, exports) {
+    /***/ 7318: /***/ function (__unused_webpack_module, exports) {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -808,7 +808,7 @@
       /***/
     },
 
-    /***/ 4971: /***/ function (
+    /***/ 4741: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -835,11 +835,11 @@
         },
       });
       const _interop_require_default = __webpack_require__(8266);
-      const _getimgprops = __webpack_require__(9671);
-      const _warnonce = __webpack_require__(130);
-      const _imagecomponent = __webpack_require__(645);
+      const _getimgprops = __webpack_require__(4813);
+      const _warnonce = __webpack_require__(114);
+      const _imagecomponent = __webpack_require__(3727);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3545)
+        __webpack_require__(4317)
       );
       const unstable_getImgProps = (imgProps) => {
         (0, _warnonce.warnOnce)(
@@ -871,7 +871,7 @@
       /***/
     },
 
-    /***/ 3545: /***/ function (__unused_webpack_module, exports) {
+    /***/ 4317: /***/ function (__unused_webpack_module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -906,7 +906,7 @@
       /***/
     },
 
-    /***/ 7141: /***/ function (
+    /***/ 7330: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -927,8 +927,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/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_biqbaboplfbrettd7655fr4n2y/node_modules/next/image.js
-      var next_image = __webpack_require__(3960);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/image.js
+      var next_image = __webpack_require__(8249);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ var nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -958,12 +958,12 @@
       /***/
     },
 
-    /***/ 3960: /***/ function (
+    /***/ 8249: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(4971);
+      module.exports = __webpack_require__(4741);
 
       /***/
     },
@@ -974,7 +974,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(5885);
+      return __webpack_exec__(801);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for index-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [405],
   {
-    /***/ 3558: /***/ function (
+    /***/ 7042: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/",
         function () {
-          return __webpack_require__(8743);
+          return __webpack_require__(8933);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 8743: /***/ function (
+    /***/ 8933: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -44,7 +44,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function () {
-      return __webpack_exec__(3558);
+      return __webpack_exec__(7042);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for link-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [644],
   {
-    /***/ 8662: /***/ function (
+    /***/ 7014: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/link",
         function () {
-          return __webpack_require__(2891);
+          return __webpack_require__(4265);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2078: /***/ function (module, exports) {
+    /***/ 1258: /***/ function (module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -86,7 +86,7 @@
       /***/
     },
 
-    /***/ 4263: /***/ function (module, exports, __webpack_require__) {
+    /***/ 452: /***/ function (module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -98,7 +98,7 @@
           return getDomainLocale;
         },
       });
-      const _normalizetrailingslash = __webpack_require__(2424);
+      const _normalizetrailingslash = __webpack_require__(3537);
       const basePath =
         /* unused pure expression or super */ null && (false || "");
       function getDomainLocale(path, locale, locales, domainLocales) {
@@ -122,7 +122,7 @@
       /***/
     },
 
-    /***/ 8027: /***/ function (module, exports, __webpack_require__) {
+    /***/ 8681: /***/ function (module, exports, __webpack_require__) {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -138,17 +138,17 @@
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(959)
       );
-      const _resolvehref = __webpack_require__(1698);
-      const _islocalurl = __webpack_require__(5216);
-      const _formaturl = __webpack_require__(9262);
-      const _utils = __webpack_require__(7590);
-      const _addlocale = __webpack_require__(6901);
-      const _routercontext = __webpack_require__(4700);
-      const _approutercontext = __webpack_require__(7922);
-      const _useintersection = __webpack_require__(8734);
-      const _getdomainlocale = __webpack_require__(4263);
-      const _addbasepath = __webpack_require__(3841);
-      const _routerreducertypes = __webpack_require__(2078);
+      const _resolvehref = __webpack_require__(9432);
+      const _islocalurl = __webpack_require__(8867);
+      const _formaturl = __webpack_require__(1347);
+      const _utils = __webpack_require__(2005);
+      const _addlocale = __webpack_require__(6486);
+      const _routercontext = __webpack_require__(4918);
+      const _approutercontext = __webpack_require__(9750);
+      const _useintersection = __webpack_require__(253);
+      const _getdomainlocale = __webpack_require__(452);
+      const _addbasepath = __webpack_require__(2247);
+      const _routerreducertypes = __webpack_require__(1258);
       const prefetched = new Set();
       function prefetch(router, href, as, options, appOptions, isAppRouter) {
         if (false) {
@@ -567,7 +567,7 @@
       /***/
     },
 
-    /***/ 8734: /***/ function (module, exports, __webpack_require__) {
+    /***/ 253: /***/ function (module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -580,7 +580,7 @@
         },
       });
       const _react = __webpack_require__(959);
-      const _requestidlecallback = __webpack_require__(251);
+      const _requestidlecallback = __webpack_require__(2657);
       const hasIntersectionObserver =
         typeof IntersectionObserver === "function";
       const observers = new Map();
@@ -693,7 +693,7 @@
       /***/
     },
 
-    /***/ 2891: /***/ function (
+    /***/ 4265: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -709,7 +709,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(4595);
+        __webpack_require__(9495);
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_link__WEBPACK_IMPORTED_MODULE_1__
@@ -740,12 +740,12 @@
       /***/
     },
 
-    /***/ 4595: /***/ function (
+    /***/ 9495: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(8027);
+      module.exports = __webpack_require__(8681);
 
       /***/
     },
@@ -756,7 +756,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(8662);
+      return __webpack_exec__(7014);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for routerDirect-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [58],
   {
-    /***/ 2188: /***/ function (
+    /***/ 7288: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/routerDirect",
         function () {
-          return __webpack_require__(1053);
+          return __webpack_require__(8831);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 1053: /***/ function (
+    /***/ 8831: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -34,7 +34,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(5866);
+        __webpack_require__(5664);
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_router__WEBPACK_IMPORTED_MODULE_1__
@@ -54,12 +54,12 @@
       /***/
     },
 
-    /***/ 5866: /***/ function (
+    /***/ 5664: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(5761);
+      module.exports = __webpack_require__(3103);
 
       /***/
     },
@@ -70,7 +70,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(2188);
+      return __webpack_exec__(7288);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for script-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [797],
   {
-    /***/ 1136: /***/ function (
+    /***/ 6695: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/script",
         function () {
-          return __webpack_require__(5353);
+          return __webpack_require__(1231);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5353: /***/ function (
+    /***/ 1231: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -34,7 +34,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(9096);
+        __webpack_require__(6071);
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_script__WEBPACK_IMPORTED_MODULE_1__
@@ -67,12 +67,12 @@
       /***/
     },
 
-    /***/ 9096: /***/ function (
+    /***/ 6071: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(560);
+      module.exports = __webpack_require__(2254);
 
       /***/
     },
@@ -83,7 +83,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(1136);
+      return __webpack_exec__(6695);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for withRouter-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [807],
   {
-    /***/ 3551: /***/ function (
+    /***/ 8118: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/withRouter",
         function () {
-          return __webpack_require__(1124);
+          return __webpack_require__(3467);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 1124: /***/ function (
+    /***/ 3467: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -34,7 +34,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(5866);
+        __webpack_require__(5664);
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_router__WEBPACK_IMPORTED_MODULE_1__
@@ -53,12 +53,12 @@
       /***/
     },
 
-    /***/ 5866: /***/ function (
+    /***/ 5664: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(5761);
+      module.exports = __webpack_require__(3103);
 
       /***/
     },
@@ -69,7 +69,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(3551);
+      return __webpack_exec__(8118);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for 35a5f01f-HASH.js
@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [812],
+  [881],
   {
-    /***/ 9244: /***/ function (
+    /***/ 6931: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -19,8 +19,8 @@
       /*
  Modernizr 3.0.0pre (Custom Build) | MIT
 */
-      var aa = __webpack_require__(2828),
-        ba = __webpack_require__(3206),
+      var aa = __webpack_require__(9528),
+        ba = __webpack_require__(1708),
         da = {
           usingClientEntryPoint: !1,
           Events: null,
Diff for 446.HASH.js
@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [446],
+  [574],
   {
-    /***/ 3446: /***/ function (
+    /***/ 8574: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
Diff for 98-HASH.js

Diff too large to display

Diff for page-3058a4c6b709422f.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [760, 185, 952],
   {
-    /***/ 5240: /***/ function () {
+    /***/ 8829: /***/ function () {
       /***/
     },
   },
@@ -10,8 +10,8 @@
     /******/ var __webpack_exec__ = function (moduleId) {
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
-    /******/ __webpack_require__.O(0, [812, 98, 744], function () {
-      return __webpack_exec__(5240);
+    /******/ __webpack_require__.O(0, [881, 819, 744], function () {
+      return __webpack_exec__(8829);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for page-1b5eddcfd77aac15.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [952, 185, 760],
   {
-    /***/ 5240: /***/ function () {
+    /***/ 8829: /***/ function () {
       /***/
     },
   },
@@ -10,8 +10,8 @@
     /******/ var __webpack_exec__ = function (moduleId) {
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
-    /******/ __webpack_require__.O(0, [812, 98, 744], function () {
-      return __webpack_exec__(5240);
+    /******/ __webpack_require__.O(0, [881, 819, 744], function () {
+      return __webpack_exec__(8829);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for layout-1e95d..198b47cbe.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [185, 952, 760],
   {
-    /***/ 5240: /***/ function () {
+    /***/ 8829: /***/ function () {
       /***/
     },
   },
@@ -10,8 +10,8 @@
     /******/ var __webpack_exec__ = function (moduleId) {
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
-    /******/ __webpack_require__.O(0, [812, 98, 744], function () {
-      return __webpack_exec__(5240);
+    /******/ __webpack_require__.O(0, [881, 819, 744], function () {
+      return __webpack_exec__(8829);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for main-HASH.js

Diff too large to display

Diff for main-app-HASH.js
@@ -1,28 +1,28 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [744],
   {
-    /***/ 7130: /***/ function (
+    /***/ 9742: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 1283, 23)
+        __webpack_require__.t.bind(__webpack_require__, 2654, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 4471, 23)
+        __webpack_require__.t.bind(__webpack_require__, 131, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 73, 23)
+        __webpack_require__.t.bind(__webpack_require__, 4955, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 4439, 23)
+        __webpack_require__.t.bind(__webpack_require__, 5609, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 9501, 23)
+        __webpack_require__.t.bind(__webpack_require__, 4631, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 3331, 23)
+        __webpack_require__.t.bind(__webpack_require__, 6454, 23)
       );
 
       /***/
@@ -33,8 +33,8 @@
     /******/ var __webpack_exec__ = function (moduleId) {
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
-    /******/ __webpack_require__.O(0, [812, 98], function () {
-      return __webpack_exec__(4121), __webpack_exec__(7130);
+    /******/ __webpack_require__.O(0, [881, 819], function () {
+      return __webpack_exec__(2780), __webpack_exec__(9742);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for webpack-HASH.js
@@ -219,7 +219,7 @@
     /******/ __webpack_require__.u = function (chunkId) {
       /******/ // return url for filenames based on template
       /******/ return (
-        "static/chunks/" + chunkId + "." + "36d8405b831b4d8d" + ".js"
+        "static/chunks/" + chunkId + "." + "6ec7ce57fcf094de" + ".js"
       );
       /******/
     };
Diff for index.html
@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-b6c94c729e6804bb.js"
+      src="/_next/static/chunks/webpack-917c5126fa399878.js"
       defer=""
     ></script>
     <script
@@ -19,15 +19,15 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-20f637a500422b12.js"
+      src="/_next/static/chunks/main-8ac420977d9105ec.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-7ba896576f11cc13.js"
+      src="/_next/static/chunks/pages/_app-46cf6cb90b19c472.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/index-b3eeca82dc15d3ca.js"
+      src="/_next/static/chunks/pages/index-94016d70d7482fe7.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>
Diff for link.html
@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-b6c94c729e6804bb.js"
+      src="/_next/static/chunks/webpack-917c5126fa399878.js"
       defer=""
     ></script>
     <script
@@ -19,15 +19,15 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-20f637a500422b12.js"
+      src="/_next/static/chunks/main-8ac420977d9105ec.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-7ba896576f11cc13.js"
+      src="/_next/static/chunks/pages/_app-46cf6cb90b19c472.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-c0ec4cd09f99730f.js"
+      src="/_next/static/chunks/pages/link-07c1abec25dfa204.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>
Diff for withRouter.html
@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-b6c94c729e6804bb.js"
+      src="/_next/static/chunks/webpack-917c5126fa399878.js"
       defer=""
     ></script>
     <script
@@ -19,15 +19,15 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-20f637a500422b12.js"
+      src="/_next/static/chunks/main-8ac420977d9105ec.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-7ba896576f11cc13.js"
+      src="/_next/static/chunks/pages/_app-46cf6cb90b19c472.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/withRouter-1c13d6b4c43864b1.js"
+      src="/_next/static/chunks/pages/withRouter-cd6c8ed384d35879.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>
Commit: 27acc2f

@shuding shuding marked this pull request as ready for review July 24, 2023 14:40
@vercel-spaces
Copy link

vercel-spaces bot commented Jul 24, 2023

Notifying the following users due to files changed in this PR:

@timneutkens, @ijjk, @styfle, @huozhi:

packages/next/src/server/config.ts

This comment was posted based on the notify modifier.

@stx-chris
Copy link

will this work with react-icons too? Right now it seems to be unaffected by modularizeImports

@imranbarbhuiya
Copy link
Contributor

no, as react-icons defines all icons in 1 file. modularizeImports will work if @react-icons/all-files comes back

@smolak
Copy link

smolak commented Jul 26, 2023

Hello. This issue and the conversation in it might be helpful.

@rafalzawadzki
Copy link

does anyone know a temporary solution while this PR waits for review?

the compile time with lucide-react is killing me, 4s and full reload with every change 😵

@smolak
Copy link

smolak commented Jul 27, 2023

does anyone know a temporary solution while this PR waits for review?

the compile time with lucide-react is killing me, 4s and full reload with every change 😵

Solution: lucide-icons/lucide#1446 (comment)

tl;dr - use exact version 0.261.0 without any additional configuration (in next.config.js), and you should be fine.

@rafalzawadzki
Copy link

does anyone know a temporary solution while this PR waits for review?
the compile time with lucide-react is killing me, 4s and full reload with every change 😵

Solution: lucide-icons/lucide#1446 (comment)

tl;dr - use exact version 0.261.0 without any additional configuration (in next.config.js), and you should be fine.

I appreciate your response, but unfortunately it didn't help! next is still compiling thousands of modules on "lucide-react": "0.261.0" 😭

- wait compiling /(dashboard)/app/page (client and server)...
- wait compiling /(marketing)/page (client and server)...
- event compiled client and server successfully in 21.2s (5948 modules)
- wait compiling /(dashboard)/app/appearance/page (client and server)...
- event compiled client and server successfully in 789 ms (2779 modules)
- wait compiling /(dashboard)/app/settings/page (client and server)...
- wait compiling /_error (client and server)...
- event compiled client and server successfully in 3s (2937 modules)

@shuding
Copy link
Member Author

shuding commented Jul 27, 2023

This PR will eliminate the lucide-icons/lucide#1446 problem.

@smolak
Copy link

smolak commented Jul 27, 2023

This PR will eliminate the lucide-icons/lucide#1446 problem.

I am really looking forward to having it merged and released.

@@ -20,6 +20,25 @@ const loadNextConfig = async (silent) => {
nextConfig.exportPathMap = nextConfig.exportPathMap && {}
nextConfig.webpack = nextConfig.webpack && {}

// Transform the `modularizeImports` option
nextConfig.modularizeImports = nextConfig.modularizeImports
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need to duplicate the logic here all the time? OO

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I should move it to somewhere else, maybe after loading the configuration. Will do that later!

@alakhpc
Copy link

alakhpc commented Jul 28, 2023

this seems to break some icons such as SortAsc and SortDesc which are aliases for ArrowUpNarrowWide and ArrowDownWideNarrow

@rafalzawadzki
Copy link

yup, I noticed the same for other icons too. Example errors:

- error ./node_modules/.pnpm/[email protected][email protected]/node_modules/lucide-react/dist/cjs/lucide-react.js:2:0
Module not found: Can't resolve 'xxx/node_modules/.pnpm/[email protected][email protected]/node_modules/lucide-react/dist/cjs/icons/menu'

- error ./node_modules/.pnpm/[email protected][email protected]/node_modules/lucide-react/dist/cjs/lucide-react.js:2:0
Module not found: Can't resolve 'xxx/node_modules/.pnpm/[email protected][email protected]/node_modules/lucide-react/dist/cjs/icons/code'

@felipebarcelospro
Copy link

Has anyone managed to resolve this issue?

@shuding
Copy link
Member Author

shuding commented Aug 2, 2023

@rafalzawadzki which Next.js version you're using? Code and Menu work for me on latest canary which has this fix.

@shuding
Copy link
Member Author

shuding commented Aug 2, 2023

@alakhpc #53483 should fix these issues

kodiakhq bot pushed a commit that referenced this pull request Aug 2, 2023
`lucide-react` follows the naming rule of `LucideName`, `NameIcon` and `Name` being exported from `/icons/{{ kebabCase Name }}`, but it has some special aliases such as `Stars` exported from `/icons/sparkles`. For now we have to add these rules manually.

Fixes #53051 (comment). In the future we'll still need an automatic way to do this.

The list was created from https://unpkg.com/[email protected]/dist/esm/lucide-react.mjs.
@rafalzawadzki
Copy link

@rafalzawadzki which Next.js version you're using? Code and Menu work for me on latest canary which has this fix.

I am on next@canary and [email protected]

I'm getting a long stack trace now:

Attempted import error: 'modularize-import-loader?name=PlusCircle&from=default&as=default&join=./icons/plus-circle!lucide-react' does not contain a default export (imported as 'PlusCircle').

Import trace for requested module:
./components/chatbot-switcher.tsx
./components/layouts/app/sidebar.tsx

./components/layouts/app/navbar.tsx
Attempted import error: 'modularize-import-loader?name=Menu&from=default&as=default&join=./icons/menu!lucide-react' does not contain a default export (imported as 'Menu').

Import trace for requested module:
./components/layouts/app/navbar.tsx

./components/ui/toast.tsx
Attempted import error: 'modularize-import-loader?name=X&from=default&as=default&join=./icons/x!lucide-react' does not contain a default export (imported as 'X').

Import trace for requested module:
./components/ui/toast.tsx
./components/ui/toaster.tsx

./lib/const/dashboard-links.ts
Attempted import error: 'modularize-import-loader?name=Palette&from=default&as=default&join=./icons/palette!lucide-react' does not contain a default export (imported as 'Palette').

Import trace for requested module:
./lib/const/dashboard-links.ts
./components/layouts/app/sidebar.tsx

./lib/const/dashboard-links.ts
Attempted import error: 'modularize-import-loader?name=SlidersHorizontal&from=default&as=default&join=./icons/sliders-horizontal!lucide-react' does not contain a default export (imported as 'SlidersHorizontal').

Import trace for requested module:
./lib/const/dashboard-links.ts
./components/layouts/app/sidebar.tsx

./lib/const/dashboard-links.ts
Attempted import error: 'modularize-import-loader?name=Zap&from=default&as=default&join=./icons/zap!lucide-react' does not contain a default export (imported as 'Zap').

Import trace for requested module:
./lib/const/dashboard-links.ts
./components/layouts/app/sidebar.tsx

./lib/const/dashboard-links.ts
Attempted import error: 'modularize-import-loader?name=BookOpen&from=default&as=default&join=./icons/book-open!lucide-react' does not contain a default export (imported as 'BookOpen').

Import trace for requested module:
./lib/const/dashboard-links.ts
./components/layouts/app/sidebar.tsx

./lib/const/dashboard-links.ts
Attempted import error: 'modularize-import-loader?name=Code&from=default&as=default&join=./icons/code!lucide-react' does not contain a default export (imported as 'Code').

Import trace for requested module:
./lib/const/dashboard-links.ts
./components/layouts/app/sidebar.tsx

./lib/const/dashboard-links.ts
Attempted import error: 'modularize-import-loader?name=Smile&from=default&as=default&join=./icons/smile!lucide-react' does not contain a default export (imported as 'Smile').

Import trace for requested module:
./lib/const/dashboard-links.ts
./components/layouts/app/sidebar.tsx
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename 'xxxx/.next/cache/webpack/client-development-fallback/1.pack.gz_' -> 'xxxx/.next/cache/webpack/client-development-fallback/1.pack.gz'

@rafalzawadzki
Copy link

ok, it works after downgrading to [email protected]! and compilation is now sub 1s so definitely in the right direction 🥳

898 ms (1660 modules)
775 ms (1681 modules)
928 ms (1652 modules)

@smolak
Copy link

smolak commented Aug 3, 2023

Yey :)

@blvdmitry
Copy link
Contributor

Hey @shuding, curious if you also had something planned for non-default exports. I'm maintaining a library where this new functionality helps a lot, allowing me to pick different folders for exported components and hooks stored in different folders. One problem I have right now is that I also export some utilities that are all stored in the same file:

// index.ts

export { default as Button } from "components/Button"; // component export, works
export { useToggle } from "hooks/useToggle";  // hook export, works

// doesn't work because modularizeImports tries to convert use default imports
export { useToast } from "components/Toast"; 
export { classNames, responsiveClassNames } from "utilities/helpers";

It seems like all imports have to be covered if we're using modularizedImports (which makes sense) but I can't see a way to include named exports coming from a specific file.

If it wasn't planned yet – I can create an issue instead and maybe look into opening a PR for that

@rumeshudash
Copy link

ok, it works after downgrading to [email protected]! and compilation is now sub 1s so definitely in the right direction 🥳

898 ms (1660 modules)
775 ms (1681 modules)
928 ms (1652 modules)

Thanks, this Working for me

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 22, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
created-by: Next.js team PRs by the Next.js team. locked Turbopack Related to Turbopack with Next.js. type: next
Projects
None yet
Development

Successfully merging this pull request may close these issues.

modularizeImports for @ant-design/icons is failing for not exported methods