@nuxt/webpack-builder 4.0.0-alpha.1 → 4.0.0-alpha.2

package/dist/index.mjs

@@ -1,14 +1,14 @@
 import pify from 'pify';
-import { join, resolve, basename, normalize, dirname, isAbsolute } from 'pathe';
 import { fromNodeMiddleware, defineEventHandler, handleCors, getRequestHeader, createError, setHeader } from 'h3';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import { defu } from 'defu';
 import { joinURL } from 'ufo';
-import { logger, importModule, useNitro, useNuxt } from '@nuxt/kit';
+import { logger, useNitro, useNuxt } from '@nuxt/kit';
 import { createUnplugin } from 'unplugin';
 import MagicString from 'magic-string';
 import { webpack, WebpackBarPlugin, builder, MiniCssExtractPlugin, TsCheckerPlugin } from '#builder';
+import { join, resolve, basename, normalize, dirname, isAbsolute } from 'pathe';
 import { createFsFromVolume, Volume } from 'memfs';
 import querystring from 'node:querystring';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
@@ -17,6 +17,7 @@ import TimeFixPlugin from 'time-fix-plugin';
 import FriendlyErrorsWebpackPlugin from '@nuxt/friendly-errors-webpack-plugin';
 import escapeRegExp from 'escape-string-regexp';
 import { isTest } from 'std-env';
+import { genObjectFromRawEntries, genString } from 'knitwork';
 import { EsbuildPlugin } from 'esbuild-loader';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import createResolver from 'postcss-import-resolver';
@@ -25,8 +26,6 @@ import VueLoaderPlugin from 'vue-loader/dist/pluginWebpack5.js';
 import { mkdir, writeFile } from 'node:fs/promises';
 import { normalizeWebpackManifest } from 'vue-bundle-renderer';
 import { hash } from 'ohash';
-import { glob } from 'tinyglobby';
-import { genSafeVariableName } from 'knitwork';
 
 const defaults = {
   globalPublicPath: "__webpack_public_path__",
@@ -179,6 +178,123 @@ class WarningIgnorePlugin {
   }
 }
 
+const validate = (compiler) => {
+  if (compiler.options.target !== "node") {
+    logger.warn('webpack config `target` should be "node".');
+  }
+  if (!compiler.options.externals) {
+    logger.info(
+      "It is recommended to externalize dependencies in the server build for better build performance."
+    );
+  }
+};
+const isJSRegExp = /\.[cm]?js(\?[^.]+)?$/;
+const isJS = (file) => isJSRegExp.test(file);
+const extractQueryPartJS = (file) => isJSRegExp.exec(file)?.[1];
+const isCSSRegExp = /\.css(?:\?[^.]+)?$/;
+const isCSS = (file) => isCSSRegExp.test(file);
+const isHotUpdate = (file) => file.includes("hot-update");
+
+const DYNAMIC_IMPORT_RE = /import\([^)]*\+\s*__webpack_require__[^+]*\)\.then/;
+const DYNAMIC_IMPORT_REPLACE_RE = /import\([^)]*\+\s*(__webpack_require__[^+]*)\)\.then/g;
+const HELPER_FILENAME = "_dynamic-import-helper.mjs";
+const HELPER_IMPORT = `import { _rollupDynamicImport } from "./${HELPER_FILENAME}";
+`;
+class RollupCompatDynamicImportPlugin {
+  apply(compiler) {
+    compiler.hooks.compilation.tap("RollupCompatDynamicImportPlugin", (compilation) => {
+      compilation.hooks.processAssets.tapAsync(
+        {
+          name: "RollupCompatDynamicImportPlugin",
+          stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE
+        },
+        (assets, callback) => {
+          try {
+            const targetFiles = /* @__PURE__ */ new Set();
+            for (const chunk of compilation.chunks) {
+              if (chunk.canBeInitial() || chunk.hasRuntime()) {
+                for (const file of chunk.files || []) {
+                  targetFiles.add(file);
+                }
+              }
+            }
+            for (const [filename, asset] of Object.entries(assets)) {
+              if (!isJS(filename)) {
+                continue;
+              }
+              if (!targetFiles.has(filename)) {
+                continue;
+              }
+              const source = asset.source();
+              const originalCode = typeof source === "string" ? source : source.toString();
+              if (!DYNAMIC_IMPORT_RE.test(originalCode)) {
+                continue;
+              }
+              const transformedCode = this.transformDynamicImports(originalCode);
+              if (transformedCode !== originalCode) {
+                assets[filename] = new compiler.webpack.sources.RawSource(transformedCode);
+              }
+            }
+            this.generateDynamicImportHelper(compilation);
+            callback();
+          } catch (error) {
+            callback(error);
+          }
+        }
+      );
+    });
+  }
+  transformDynamicImports(source) {
+    let transformed = source;
+    let needsHelperImport = false;
+    transformed = transformed.replace(DYNAMIC_IMPORT_REPLACE_RE, (match, filename) => {
+      needsHelperImport = true;
+      return `_rollupDynamicImport(${filename}).then`;
+    });
+    if (needsHelperImport && !transformed.includes(HELPER_IMPORT)) {
+      transformed = HELPER_IMPORT + transformed;
+    }
+    return transformed;
+  }
+  generateDynamicImportHelper(compilation) {
+    const chunkFiles = [];
+    for (const chunk of compilation.chunks) {
+      if (chunk.hasRuntime()) {
+        continue;
+      }
+      for (const filename of chunk.files) {
+        if (filename && isJS(filename)) {
+          chunkFiles.push(filename);
+        }
+      }
+    }
+    if (chunkFiles.length === 0) {
+      return;
+    }
+    const helperContent = this.generateHelperContent(chunkFiles);
+    compilation.emitAsset(HELPER_FILENAME, new compilation.compiler.webpack.sources.RawSource(helperContent));
+  }
+  generateHelperContent(chunkFiles) {
+    return `
+// Rollup-compatible dynamic import helper generated by webpack
+// This helper enables rollup to consume webpack chunks directly
+
+const chunkMap = ${genObjectFromRawEntries(chunkFiles.map((filename) => [filename, `() => import(${genString("./" + filename)})`]))}
+
+// Dynamic import function that rollup can understand
+export function _rollupDynamicImport(chunkId) {
+  const chunk = chunkMap[chunkId]
+  if (!chunk) {
+    return Promise.reject(new Error(\`Chunk \${chunkId} not found in chunkMap. Available chunks: \${Object.keys(chunkMap).join(', ')}\`))
+  }
+  
+  // Use actual dynamic import for the chunk
+  return chunk()
+}
+`;
+  }
+}
+
 async function base(ctx) {
   await applyPresets(ctx, [
     baseAlias,
@@ -267,6 +383,9 @@ function basePlugins(ctx) {
       }
     }));
   }
+  if (ctx.isServer && !ctx.isDev) {
+    ctx.config.plugins.push(new RollupCompatDynamicImportPlugin());
+  }
 }
 function baseAlias(ctx) {
   ctx.alias = {
@@ -583,23 +702,6 @@ async function createPostcssLoadersRule(ctx) {
   };
 }
 
-const validate = (compiler) => {
-  if (compiler.options.target !== "node") {
-    logger.warn('webpack config `target` should be "node".');
-  }
-  if (!compiler.options.externals) {
-    logger.info(
-      "It is recommended to externalize dependencies in the server build for better build performance."
-    );
-  }
-};
-const isJSRegExp = /\.[cm]?js(\?[^.]+)?$/;
-const isJS = (file) => isJSRegExp.test(file);
-const extractQueryPartJS = (file) => isJSRegExp.exec(file)?.[1];
-const isCSSRegExp = /\.css(?:\?[^.]+)?$/;
-const isCSS = (file) => isCSSRegExp.test(file);
-const isHotUpdate = (file) => file.includes("hot-update");
-
 class VueSSRClientPlugin {
   options;
   constructor(options) {
@@ -1014,92 +1116,6 @@ function serverPlugins(ctx) {
   }
 }
 
-const PLUGIN_NAME = "dynamic-require";
-const HELPER_DYNAMIC = `\0${PLUGIN_NAME}.mjs`;
-const DYNAMIC_REQUIRE_RE = /import\((?:.*\+\s*)?"\.\/" ?\+(.*)\).then/g;
-const BACKWARD_SLASH_RE = /\\/g;
-function dynamicRequire({ dir, ignore, inline }) {
-  const filesToIgnore = new Set(ignore);
-  return {
-    name: PLUGIN_NAME,
-    transform(code, _id) {
-      return {
-        code: code.replace(
-          DYNAMIC_REQUIRE_RE,
-          `import('${HELPER_DYNAMIC}').then(r => r.default || r).then(dynamicRequire => dynamicRequire($1)).then`
-        ),
-        map: null
-      };
-    },
-    resolveId(id) {
-      return id === HELPER_DYNAMIC ? id : null;
-    },
-    // TODO: Async chunk loading over network!
-    // renderDynamicImport () {
-    //   return {
-    //     left: 'fetch(', right: ')'
-    //   }
-    // },
-    async load(_id) {
-      if (_id !== HELPER_DYNAMIC) {
-        return null;
-      }
-      let files = [];
-      try {
-        const wpManifest = resolve(dir, "./server.manifest.json");
-        files = await importModule(wpManifest).then((r) => Object.keys(r.files).filter((file) => !filesToIgnore.has(file)));
-      } catch {
-        files = await glob("**/*.{cjs,mjs,js}", {
-          cwd: dir,
-          absolute: false,
-          ignore
-        });
-      }
-      const chunks = (await Promise.all(
-        files.map(async (id) => ({
-          id,
-          src: resolve(dir, id).replace(BACKWARD_SLASH_RE, "/"),
-          name: genSafeVariableName(id),
-          meta: await getWebpackChunkMeta(resolve(dir, id))
-        }))
-      )).filter((chunk) => chunk.meta);
-      return inline ? TMPL_INLINE({ chunks }) : TMPL_LAZY({ chunks });
-    }
-  };
-}
-async function getWebpackChunkMeta(src) {
-  const chunk = await importModule(src) || {};
-  const { __webpack_id__, __webpack_ids__, __webpack_modules__, id = __webpack_id__, ids = __webpack_ids__, modules = __webpack_modules__ } = chunk;
-  if (!id && !ids) {
-    return null;
-  }
-  return {
-    id,
-    ids,
-    moduleIds: Object.keys(modules || {})
-  };
-}
-function TMPL_INLINE({ chunks }) {
-  return `${chunks.map((i) => `import * as ${i.name} from '${i.src}'`).join("\n")}
-const dynamicChunks = {
-  ${chunks.map((i) => ` ['${i.id}']: ${i.name}`).join(",\n")}
-};
-
-export default function dynamicRequire(id) {
-  return Promise.resolve(dynamicChunks[id]);
-};`;
-}
-function TMPL_LAZY({ chunks }) {
-  return `
-const dynamicChunks = {
-${chunks.map((i) => ` ['${i.id}']: () => import('${i.src}')`).join(",\n")}
-};
-
-export default function dynamicRequire(id) {
-  return dynamicChunks[id]();
-};`;
-}
-
 const bundle = async (nuxt) => {
   const webpackConfigs = await Promise.all([client, ...nuxt.options.ssr ? [server] : []].map(async (preset) => {
     const ctx = createWebpackConfigContext(nuxt);
@@ -1109,26 +1125,13 @@ const bundle = async (nuxt) => {
   }));
   if (!nuxt.options.dev) {
     const nitro = useNitro();
-    const dynamicRequirePlugin = dynamicRequire({
-      dir: resolve(nuxt.options.buildDir, "dist/server"),
-      inline: nitro.options.node === false || nitro.options.inlineDynamicImports,
-      ignore: [
-        "client.manifest.mjs",
-        "server.js",
-        "server.cjs",
-        "server.mjs",
-        "server.manifest.mjs"
-      ]
-    });
-    const prerenderRollupPlugins = nitro.options._config.rollupConfig.plugins;
-    const rollupPlugins = nitro.options.rollupConfig.plugins;
-    for (const plugins of [prerenderRollupPlugins, rollupPlugins]) {
+    nitro.hooks.hook("rollup:before", (_nitro, config) => {
+      const plugins = config.plugins;
       const existingPlugin = plugins.findIndex((i) => i && "name" in i && i.name === "dynamic-require");
       if (existingPlugin >= 0) {
         plugins.splice(existingPlugin, 1);
       }
-      plugins.push(dynamicRequirePlugin);
-    }
+    });
   }
   await nuxt.callHook(`${builder}:config`, webpackConfigs);
   const mfs = nuxt.options.dev ? createMFS() : null;
@@ -1150,7 +1153,7 @@ const bundle = async (nuxt) => {
   });
   nuxt.hook("close", async () => {
     for (const compiler of compilers) {
-      await new Promise((resolve2) => compiler.close(resolve2));
+      await new Promise((resolve) => compiler.close(resolve));
     }
   });
   if (nuxt.options.dev) {
@@ -1204,21 +1207,21 @@ function wdmToH3Handler(devMiddleware, corsOptions) {
       devMiddleware: devMiddleware.context
     };
     const { req, res } = event.node;
-    const body = await new Promise((resolve2, reject) => {
+    const body = await new Promise((resolve, reject) => {
       res.stream = (stream) => {
-        resolve2(stream);
+        resolve(stream);
       };
       res.send = (data) => {
-        resolve2(data);
+        resolve(data);
       };
       res.finish = (data) => {
-        resolve2(data);
+        resolve(data);
       };
       devMiddleware(req, res, (err) => {
         if (err) {
           reject(err);
         } else {
-          resolve2(void 0);
+          resolve(void 0);
         }
       });
     });
@@ -1237,9 +1240,9 @@ async function compile(compiler) {
       await Promise.all(compilersWatching.map((watching) => pify(watching.close.bind(watching))()));
     });
     if (compiler.options.name === "client") {
-      return new Promise((resolve2, reject) => {
+      return new Promise((resolve, reject) => {
         compiler.hooks.done.tap("nuxt-dev", () => {
-          resolve2(null);
+          resolve(null);
         });
         compiler.hooks.failed.tap("nuxt-errorlog", (err) => {
           reject(err);
@@ -1251,17 +1254,17 @@ async function compile(compiler) {
         });
       });
     }
-    return new Promise((resolve2, reject) => {
+    return new Promise((resolve, reject) => {
       const watching = compiler.watch(nuxt.options.watchers.webpack, (err) => {
         if (err) {
           return reject(err);
         }
-        resolve2(null);
+        resolve(null);
       });
       compilersWatching.push(watching);
     });
   }
-  const stats = await new Promise((resolve2, reject) => compiler.run((err, stats2) => err ? reject(err) : resolve2(stats2)));
+  const stats = await new Promise((resolve, reject) => compiler.run((err, stats2) => err ? reject(err) : resolve(stats2)));
   if (stats.hasErrors()) {
     const error = new Error("Nuxt build error");
     error.stack = stats.toString("errors-only");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/webpack-builder",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",
@@ -60,21 +60,21 @@
     "url-loader": "^4.1.1",
     "vue-bundle-renderer": "^2.1.1",
     "vue-loader": "^17.4.2",
-    "webpack": "^5.99.8",
+    "webpack": "^5.99.9",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-dev-middleware": "^7.4.2",
     "webpack-hot-middleware": "^2.26.1",
     "webpackbar": "^7.0.0",
-    "@nuxt/kit": "4.0.0-alpha.1"
+    "@nuxt/kit": "4.0.0-alpha.2"
   },
   "devDependencies": {
-    "@rspack/core": "1.3.13",
+    "@rspack/core": "1.3.15",
     "@types/webpack-bundle-analyzer": "4.7.0",
     "@types/webpack-hot-middleware": "2.25.9",
-    "rollup": "4.41.1",
+    "rollup": "4.42.0",
     "unbuild": "3.5.0",
     "vue": "3.5.16",
-    "@nuxt/schema": "4.0.0-alpha.1"
+    "@nuxt/schema": "4.0.0-alpha.2"
   },
   "peerDependencies": {
     "vue": "^3.3.4"