@nuxt/webpack-builder 3.17.3 → 3.17.5

package/builder.mjs

@@ -2,3 +2,4 @@ export const builder = 'webpack'
 export { default as webpack } from 'webpack'
 export { default as MiniCssExtractPlugin } from 'mini-css-extract-plugin'
 export { default as WebpackBarPlugin } from 'webpackbar'
+export { default as TsCheckerPlugin } from 'fork-ts-checker-webpack-plugin'

package/dist/index.mjs

@@ -4,20 +4,20 @@ import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import { defu } from 'defu';
 import { joinURL } from 'ufo';
-import { logger, 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 } from '#builder';
+import { webpack, WebpackBarPlugin, builder, MiniCssExtractPlugin, TsCheckerPlugin } from '#builder';
 import { join, resolve, normalize, dirname, isAbsolute } from 'pathe';
 import { createFsFromVolume, Volume } from 'memfs';
 import querystring from 'node:querystring';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
-import ForkTSCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import { defineEnv } from 'unenv';
 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';
@@ -178,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,
@@ -266,6 +383,9 @@ function basePlugins(ctx) {
       }
     }));
   }
+  if (ctx.isServer && !ctx.isDev) {
+    ctx.config.plugins.push(new RollupCompatDynamicImportPlugin());
+  }
 }
 function baseAlias(ctx) {
   ctx.alias = {
@@ -579,23 +699,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) {
@@ -889,7 +992,7 @@ function clientPlugins(ctx) {
   }
   if (!ctx.nuxt.options.ssr) {
     if (!ctx.nuxt.options.test && (ctx.nuxt.options.typescript.typeCheck === true || ctx.nuxt.options.typescript.typeCheck === "build" && !ctx.nuxt.options.dev)) {
-      ctx.config.plugins.push(new ForkTSCheckerWebpackPlugin({
+      ctx.config.plugins.push(new TsCheckerPlugin({
         logger
       }));
     }
@@ -966,13 +1069,14 @@ function serverStandalone(ctx) {
     "#",
     ...ctx.options.build.transpile
   ];
-  const external = [
+  const external = /* @__PURE__ */ new Set([
     "#internal/nitro",
     "#shared",
     resolve(ctx.nuxt.options.rootDir, ctx.nuxt.options.dir.shared)
-  ];
+  ]);
   if (!ctx.nuxt.options.dev) {
-    external.push("#internal/nuxt/paths", "#app-manifest");
+    external.add("#internal/nuxt/paths");
+    external.add("#app-manifest");
   }
   if (!Array.isArray(ctx.config.externals)) {
     return;
@@ -981,7 +1085,7 @@ function serverStandalone(ctx) {
     if (!request) {
       return cb(void 0, false);
     }
-    if (external.includes(request)) {
+    if (external.has(request)) {
       return cb(void 0, true);
     }
     if (request[0] === "." || isAbsolute(request) || inline.find((prefix) => typeof prefix === "string" && request.startsWith(prefix)) || assetPattern.test(request)) {
@@ -999,7 +1103,7 @@ function serverPlugins(ctx) {
     }));
   }
   if (!ctx.nuxt.options.test && (ctx.nuxt.options.typescript.typeCheck === true || ctx.nuxt.options.typescript.typeCheck === "build" && !ctx.nuxt.options.dev)) {
-    ctx.config.plugins.push(new ForkTSCheckerWebpackPlugin({
+    ctx.config.plugins.push(new TsCheckerPlugin({
       logger
     }));
   }
@@ -1012,6 +1116,16 @@ const bundle = async (nuxt) => {
     await applyPresets(ctx, preset);
     return ctx.config;
   }));
+  if (!nuxt.options.dev) {
+    const nitro = useNitro();
+    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);
+      }
+    });
+  }
   await nuxt.callHook(`${builder}:config`, webpackConfigs);
   const mfs = nuxt.options.dev ? createMFS() : null;
   for (const config of webpackConfigs) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/webpack-builder",
-  "version": "3.17.3",
+  "version": "3.17.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",
@@ -38,13 +38,14 @@
     "fork-ts-checker-webpack-plugin": "^9.1.0",
     "h3": "^1.15.3",
     "jiti": "^2.4.2",
+    "knitwork": "^1.2.0",
     "magic-string": "^0.30.17",
-    "memfs": "^4.17.1",
+    "memfs": "^4.17.2",
     "mini-css-extract-plugin": "^2.9.2",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
     "pify": "^6.1.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.4",
     "postcss-import": "^16.1.0",
     "postcss-import-resolver": "^2.0.0",
     "postcss-loader": "^8.1.1",
@@ -53,26 +54,27 @@
     "std-env": "^3.9.0",
     "time-fix-plugin": "^2.0.7",
     "ufo": "^1.6.1",
-    "unenv": "^2.0.0-rc.15",
-    "unplugin": "^2.3.3",
+    "unenv": "^2.0.0-rc.17",
+    "unplugin": "^2.3.5",
     "url-loader": "^4.1.1",
     "vue-bundle-renderer": "^2.1.1",
     "vue-loader": "^17.4.2",
-    "webpack": "^5.99.5",
+    "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": "3.17.3"
+    "@nuxt/kit": "3.17.5"
   },
   "devDependencies": {
-    "@rspack/core": "1.3.9",
+    "@rspack/core": "1.3.13",
     "@types/pify": "6.1.0",
     "@types/webpack-bundle-analyzer": "4.7.0",
     "@types/webpack-hot-middleware": "2.25.9",
+    "rollup": "4.41.1",
     "unbuild": "3.5.0",
-    "vue": "3.5.13",
-    "@nuxt/schema": "3.17.3"
+    "vue": "3.5.16",
+    "@nuxt/schema": "3.17.5"
   },
   "peerDependencies": {
     "vue": "^3.3.4"