@nuxt/webpack-builder 3.13.2 → 3.14.0

package/builder.mjs

@@ -0,0 +1,3 @@
+export const builder = 'webpack'
+export { default as webpack } from 'webpack'
+export { default as MiniCssExtractPlugin } from 'mini-css-extract-plugin'

package/dist/index.mjs

@@ -1,21 +1,20 @@
 import pify from 'pify';
-import webpack from 'webpack';
 import { fromNodeMiddleware, defineEventHandler } from 'h3';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import { defu } from 'defu';
 import { parseURL, parseQuery, joinURL } from 'ufo';
-import { useNuxt, logger, resolveAlias, tryResolveModule, requireModule } from '@nuxt/kit';
-import { pathToFileURL, fileURLToPath } from 'node:url';
+import { logger, useNuxt } from '@nuxt/kit';
+import { pathToFileURL } from 'node:url';
 import { createUnplugin } from 'unplugin';
 import { isAbsolute, relative, join, resolve, normalize, dirname } from 'pathe';
 import { walk } from 'estree-walker';
 import MagicString from 'magic-string';
 import { hash } from 'ohash';
 import escapeRE from 'escape-string-regexp';
-import { findStaticImports, parseStaticImport, interopDefault } from 'mlly';
+import { findStaticImports, parseStaticImport } from 'mlly';
+import { webpack, builder, MiniCssExtractPlugin } from '#builder';
 import { createFsFromVolume, Volume } from 'memfs';
-import VirtualModulesPlugin from 'webpack-virtual-modules';
 import querystring from 'node:querystring';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import ForkTSCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
@@ -26,13 +25,12 @@ import WebpackBar from 'webpackbar';
 import FriendlyErrorsWebpackPlugin from '@nuxt/friendly-errors-webpack-plugin';
 import { isTest } from 'std-env';
 import { EsbuildPlugin } from 'esbuild-loader';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import createResolver from 'postcss-import-resolver';
+import { createJiti } from 'jiti';
 import VueLoaderPlugin from 'vue-loader/dist/pluginWebpack5.js';
 import { mkdir, writeFile } from 'node:fs/promises';
 import { normalizeWebpackManifest } from 'vue-bundle-renderer';
-import hash$1 from 'hash-sum';
 
 function matchWithStringOrRegex(value, matcher) {
   if (typeof matcher === "string") {
@@ -43,15 +41,16 @@ function matchWithStringOrRegex(value, matcher) {
   return false;
 }
 
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => {
-  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const stringTypes = ["Literal", "TemplateLiteral"];
 const NUXT_LIB_RE = /node_modules\/(?:nuxt|nuxt3|nuxt-nightly)\//;
 const SUPPORTED_EXT_RE = /\.(?:m?[jt]sx?|vue)/;
+const SCRIPT_RE = /(?<=<script[^>]*>)[\s\S]*?(?=<\/script>)/i;
 const composableKeysPlugin = createUnplugin((options) => {
   const composableMeta = {};
   const composableLengths = /* @__PURE__ */ new Set();
@@ -74,7 +73,7 @@ const composableKeysPlugin = createUnplugin((options) => {
       if (!KEYED_FUNCTIONS_RE.test(code)) {
         return;
       }
-      const { 0: script = code, index: codeIndex = 0 } = code.match(/(?<=<script[^>]*>)[\s\S]*?(?=<\/script>)/i) || { index: 0, 0: code };
+      const { 0: script = code, index: codeIndex = 0 } = code.match(SCRIPT_RE) || { index: 0, 0: code };
       const s = new MagicString(code);
       let imports;
       let count = 0;
@@ -179,8 +178,8 @@ const composableKeysPlugin = createUnplugin((options) => {
 class ScopeTracker {
   constructor() {
     // the top of the stack is not a part of current key, it is used for next level
-    __publicField$3(this, "scopeIndexStack");
-    __publicField$3(this, "curScopeKey");
+    __publicField$4(this, "scopeIndexStack");
+    __publicField$4(this, "curScopeKey");
     this.scopeIndexStack = [0];
     this.curScopeKey = "";
   }
@@ -199,8 +198,8 @@ class ScopeTracker {
 }
 class ScopedVarsCollector {
   constructor() {
-    __publicField$3(this, "curScopeKey");
-    __publicField$3(this, "all");
+    __publicField$4(this, "curScopeKey");
+    __publicField$4(this, "all");
     this.all = /* @__PURE__ */ new Map();
     this.curScopeKey = "";
   }
@@ -299,8 +298,16 @@ ${options.globalPublicPath} = buildAssetsURL();
   };
 });
 
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, key + "" , value);
+  return value;
+};
 const pluginName = "ChunkErrorPlugin";
-const script = `
+class ChunkErrorPlugin {
+  constructor() {
+    __publicField$3(this, "script", `
 if (typeof ${webpack.RuntimeGlobals.require} !== "undefined") {
   var _ensureChunk = ${webpack.RuntimeGlobals.ensureChunk};
   ${webpack.RuntimeGlobals.ensureChunk} = function (chunkId) {
@@ -311,14 +318,14 @@ if (typeof ${webpack.RuntimeGlobals.require} !== "undefined") {
       throw error
     });
   };
-};`;
-class ChunkErrorPlugin {
+};`);
+  }
   apply(compiler) {
     compiler.hooks.thisCompilation.tap(
       pluginName,
       (compilation) => compilation.mainTemplate.hooks.localVars.tap(
         { name: pluginName, stage: 1 },
-        (source) => source + script
+        (source) => source + this.script
       )
     );
   }
@@ -333,25 +340,6 @@ function createMFS() {
   return _fs;
 }
 
-function registerVirtualModules() {
-  const nuxt = useNuxt();
-  const virtualModules = new VirtualModulesPlugin(nuxt.vfs);
-  const writeFiles = () => {
-    for (const filePath in nuxt.vfs) {
-      virtualModules.writeModule(filePath, nuxt.vfs[filePath] || "");
-    }
-  };
-  nuxt.hook("webpack:compile", ({ compiler }) => {
-    if (compiler.name === "server") {
-      writeFiles();
-    }
-  });
-  nuxt.hook("app:templatesGenerated", writeFiles);
-  nuxt.hook("webpack:config", (configs) => configs.forEach((config) => {
-    config.plugins.push(virtualModules);
-  }));
-}
-
 function toArray(value) {
   return Array.isArray(value) ? value : [value];
 }
@@ -482,10 +470,14 @@ function baseConfig(ctx) {
 function basePlugins(ctx) {
   ctx.config.plugins = ctx.config.plugins || [];
   if (ctx.options.dev) {
-    ctx.config.plugins.push(new TimeFixPlugin());
+    if (ctx.nuxt.options.builder !== "@nuxt/rspack-builder") {
+      ctx.config.plugins.push(new TimeFixPlugin());
+    }
   }
   ctx.config.plugins.push(...ctx.userConfig.plugins || []);
-  ctx.config.plugins.push(new WarningIgnorePlugin(getWarningIgnoreFilter(ctx)));
+  if (ctx.nuxt.options.builder !== "@nuxt/rspack-builder") {
+    ctx.config.plugins.push(new WarningIgnorePlugin(getWarningIgnoreFilter(ctx)));
+  }
   ctx.config.plugins.push(new webpack.DefinePlugin(getEnv(ctx)));
   if (ctx.isServer || ctx.isDev && ctx.userConfig.friendlyErrors) {
     ctx.config.plugins.push(
@@ -513,21 +505,21 @@ function basePlugins(ctx) {
         reporter: {
           change: (_, { shortPath }) => {
             if (!ctx.isServer) {
-              ctx.nuxt.callHook("webpack:change", shortPath);
+              ctx.nuxt.callHook(`${builder}:change`, shortPath);
             }
           },
           done: ({ state }) => {
             if (state.hasErrors) {
-              ctx.nuxt.callHook("webpack:error");
+              ctx.nuxt.callHook(`${builder}:error`);
             } else {
               logger.success(`${state.name} ${state.message}`);
             }
           },
           allDone: () => {
-            ctx.nuxt.callHook("webpack:done");
+            ctx.nuxt.callHook(`${builder}:done`);
           },
           progress({ statesArray }) {
-            ctx.nuxt.callHook("webpack:progress", statesArray);
+            ctx.nuxt.callHook(`${builder}:progress`, statesArray);
           }
         }
       }
@@ -537,9 +529,6 @@ function basePlugins(ctx) {
 function baseAlias(ctx) {
   ctx.alias = {
     "#app": ctx.options.appDir,
-    "#build/plugins": resolve(ctx.options.buildDir, "plugins", ctx.isClient ? "client" : "server"),
-    "#build": ctx.options.buildDir,
-    "#internal/nuxt/paths": resolve(ctx.nuxt.options.buildDir, "paths.mjs"),
     ...ctx.options.alias,
     ...ctx.alias
   };
@@ -567,7 +556,7 @@ function baseTranspile(ctx) {
     // include SFCs in node_modules
     /consola\/src/,
     /vue-demi/,
-    /(^|\/)nuxt\/(dist\/)?(app|[^/]+\/runtime)($|\/)/
+    /(^|\/)nuxt\/(src\/|dist\/)?(app|[^/]+\/runtime)($|\/)/
   ];
   for (let pattern of ctx.options.build.transpile) {
     if (typeof pattern === "function") {
@@ -720,30 +709,24 @@ async function getPostcssConfig(nuxt) {
     },
     sourceMap: nuxt.options.webpack.cssSourceMap
   });
+  const jiti = createJiti(nuxt.options.rootDir, { alias: nuxt.options.alias });
   if (!Array.isArray(postcssOptions.plugins) && isPureObject(postcssOptions.plugins)) {
-    const cwd = fileURLToPath(new URL(".", import.meta.url));
     const plugins = [];
     for (const pluginName of sortPlugins(postcssOptions)) {
       const pluginOptions = postcssOptions.plugins[pluginName];
       if (!pluginOptions) {
         continue;
       }
-      let pluginPath = resolveAlias(pluginName, nuxt.options.alias);
       let pluginFn;
-      if (pluginPath[0] === ".") {
-        pluginPath = resolve(nuxt.options.rootDir, pluginPath);
-      }
-      const path = await tryResolveModule(pluginPath, nuxt.options.modulesDir);
-      if (path) {
-        pluginFn = await import(pathToFileURL(path).href).then(interopDefault);
-      } else {
-        if (!isAbsolute(pluginPath)) {
-          console.warn(`[nuxt] could not import postcss plugin \`${pluginName}\` with ESM. Please report this as a bug.`);
+      for (const parentURL of nuxt.options.modulesDir) {
+        pluginFn = await jiti.import(pluginName, { parentURL: parentURL.replace(/\/node_modules\/?$/, ""), try: true, default: true });
+        if (typeof pluginFn === "function") {
+          plugins.push(pluginFn(pluginOptions));
+          break;
         }
-        pluginFn = requireModule(pluginPath, { paths: [cwd] });
       }
-      if (typeof pluginFn === "function") {
-        plugins.push(pluginFn(pluginOptions));
+      if (typeof pluginFn !== "function") {
+        console.warn(`[nuxt] could not import postcss plugin \`${pluginName}\`. Please report this as a bug.`);
       }
     }
     postcssOptions.plugins = plugins;
@@ -868,7 +851,8 @@ const validate = (compiler) => {
 const isJSRegExp = /\.[cm]?js(\?[^.]+)?$/;
 const isJS = (file) => isJSRegExp.test(file);
 const extractQueryPartJS = (file) => isJSRegExp.exec(file)?.[1];
-const isCSS = (file) => /\.css(?:\?[^.]+)?$/.test(file);
+const isCSSRegExp = /\.css(?:\?[^.]+)?$/;
+const isCSS = (file) => isCSSRegExp.test(file);
 const isHotUpdate = (file) => file.includes("hot-update");
 
 var __defProp$1 = Object.defineProperty;
@@ -888,9 +872,11 @@ class VueSSRClientPlugin {
     compiler.hooks.afterEmit.tap("VueSSRClientPlugin", async (compilation) => {
       const stats = compilation.getStats().toJson();
       const initialFiles = /* @__PURE__ */ new Set();
-      for (const name in stats.entrypoints) {
-        const entryAssets = stats.entrypoints[name].assets;
-        for (const asset of entryAssets) {
+      for (const { assets } of Object.values(stats.entrypoints)) {
+        if (!assets) {
+          continue;
+        }
+        for (const asset of assets) {
           const file = asset.name;
           if ((isJS(file) || isCSS(file)) && !isHotUpdate(file)) {
             initialFiles.add(file);
@@ -910,7 +896,7 @@ class VueSSRClientPlugin {
           asyncFiles.add(file);
         }
         if (isFileJS) {
-          const componentHash = hash$1(chunkNames.join("|"));
+          const componentHash = hash(chunkNames.join("|"));
           const map = assetsMapping[componentHash] || (assetsMapping[componentHash] = []);
           map.push(file);
         }
@@ -926,44 +912,46 @@ class VueSSRClientPlugin {
         assetsMapping
       };
       const { entrypoints = {}, namedChunkGroups = {} } = stats;
-      const assetModules = stats.modules.filter((m) => m.assets.length);
-      const fileToIndex = (file) => webpackManifest.all.indexOf(file);
-      stats.modules.forEach((m) => {
-        if (m.chunks.length === 1) {
-          const [cid] = m.chunks;
-          const chunk = stats.chunks.find((c) => c.id === cid);
-          if (!chunk || !chunk.files || !cid) {
-            return;
-          }
-          const id = m.identifier.replace(/\s\w+$/, "");
-          const filesSet = new Set(chunk.files.map(fileToIndex).filter((i) => i !== -1));
-          for (const chunkName of chunk.names) {
-            if (!entrypoints[chunkName]) {
-              const chunkGroup = namedChunkGroups[chunkName];
-              if (chunkGroup) {
-                for (const asset of chunkGroup.assets) {
-                  filesSet.add(fileToIndex(asset.name));
-                }
+      const fileToIndex = (file) => webpackManifest.all.indexOf(String(file));
+      for (const m of stats.modules) {
+        if (m.chunks?.length !== 1) {
+          continue;
+        }
+        const [cid] = m.chunks;
+        const chunk = stats.chunks.find((c) => c.id === cid);
+        if (!chunk || !chunk.files || !cid) {
+          continue;
+        }
+        const id = m.identifier.replace(/\s\w+$/, "");
+        const filesSet = new Set(chunk.files.map(fileToIndex).filter((i) => i !== -1));
+        for (const chunkName of chunk.names) {
+          if (!entrypoints[chunkName]) {
+            const chunkGroup = namedChunkGroups[chunkName];
+            if (chunkGroup) {
+              for (const asset of chunkGroup.assets) {
+                filesSet.add(fileToIndex(asset.name));
               }
             }
           }
-          const files = Array.from(filesSet);
-          webpackManifest.modules[hash$1(id)] = files;
-          if (Array.isArray(m.modules)) {
-            for (const concatenatedModule of m.modules) {
-              const id2 = hash$1(concatenatedModule.identifier.replace(/\s\w+$/, ""));
-              if (!webpackManifest.modules[id2]) {
-                webpackManifest.modules[id2] = files;
-              }
+        }
+        const files = Array.from(filesSet);
+        webpackManifest.modules[hash(id)] = files;
+        if (Array.isArray(m.modules)) {
+          for (const concatenatedModule of m.modules) {
+            const id2 = hash(concatenatedModule.identifier.replace(/\s\w+$/, ""));
+            if (!webpackManifest.modules[id2]) {
+              webpackManifest.modules[id2] = files;
             }
           }
-          assetModules.forEach((m2) => {
-            if (m2.chunks.includes(cid)) {
+        }
+        if (stats.modules) {
+          for (const m2 of stats.modules) {
+            if (m2.assets?.length && m2.chunks?.includes(cid)) {
               files.push(...m2.assets.map(fileToIndex));
             }
-          });
+          }
         }
-      });
+      }
       const manifest = normalizeWebpackManifest(webpackManifest);
       await this.options.nuxt.callHook("build:manifest", manifest);
       const src = JSON.stringify(manifest, null, 2);
@@ -1068,8 +1056,9 @@ function vue(ctx) {
     }));
   }
   ctx.config.plugins.push(new webpack.DefinePlugin({
-    __VUE_OPTIONS_API__: "true",
-    __VUE_PROD_DEVTOOLS__: "false"
+    "__VUE_OPTIONS_API__": "true",
+    "__VUE_PROD_DEVTOOLS__": "false",
+    "__VUE_PROD_HYDRATION_MISMATCH_DETAILS__": ctx.nuxt.options.debug
   }));
 }
 
@@ -1247,7 +1236,11 @@ function serverStandalone(ctx) {
     "#",
     ...ctx.options.build.transpile
   ];
-  const external = ["#internal/nitro"];
+  const external = [
+    "#internal/nitro",
+    "#shared",
+    resolve(ctx.nuxt.options.rootDir, ctx.nuxt.options.dir.shared)
+  ];
   if (!ctx.nuxt.options.dev) {
     external.push("#internal/nuxt/paths");
   }
@@ -1283,20 +1276,19 @@ function serverPlugins(ctx) {
 }
 
 const bundle = async (nuxt) => {
-  registerVirtualModules();
   const webpackConfigs = await Promise.all([client, ...nuxt.options.ssr ? [server] : []].map(async (preset) => {
     const ctx = createWebpackConfigContext(nuxt);
     ctx.userConfig = defu(nuxt.options.webpack[`$${preset.name}`], ctx.userConfig);
     await applyPresets(ctx, preset);
     return getWebpackConfig(ctx);
   }));
-  await nuxt.callHook("webpack:config", webpackConfigs);
+  await nuxt.callHook(`${builder}:config`, webpackConfigs);
   const mfs = nuxt.options.dev ? createMFS() : null;
   for (const config of webpackConfigs) {
     config.plugins.push(DynamicBasePlugin.webpack({
       sourcemap: !!nuxt.options.sourcemap[config.name]
     }));
-    if (config.name === "client" && nuxt.options.experimental.emitRouteChunkError) {
+    if (config.name === "client" && nuxt.options.experimental.emitRouteChunkError && nuxt.options.builder !== "@nuxt/rspack-builder") {
       config.plugins.push(new ChunkErrorPlugin());
     }
     config.plugins.push(composableKeysPlugin.webpack({
@@ -1305,7 +1297,7 @@ const bundle = async (nuxt) => {
       composables: nuxt.options.optimization.keyedComposables
     }));
   }
-  await nuxt.callHook("webpack:configResolved", webpackConfigs);
+  await nuxt.callHook(`${builder}:configResolved`, webpackConfigs);
   const compilers = webpackConfigs.map((config) => {
     const compiler = webpack(config);
     if (nuxt.options.dev) {
@@ -1353,9 +1345,9 @@ async function createDevMiddleware(compiler) {
 }
 async function compile(compiler) {
   const nuxt = useNuxt();
-  await nuxt.callHook("webpack:compile", { name: compiler.options.name, compiler });
+  await nuxt.callHook(`${builder}:compile`, { name: compiler.options.name, compiler });
   compiler.hooks.done.tap("load-resources", async (stats2) => {
-    await nuxt.callHook("webpack:compiled", { name: compiler.options.name, compiler, stats: stats2 });
+    await nuxt.callHook(`${builder}:compiled`, { name: compiler.options.name, compiler, stats: stats2 });
   });
   if (nuxt.options.dev) {
     const compilersWatching = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/webpack-builder",
-  "version": "3.13.2",
+  "version": "3.14.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",
@@ -11,6 +11,9 @@
   "license": "MIT",
   "type": "module",
   "types": "./dist/index.d.ts",
+  "imports": {
+    "#builder": "./builder.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -19,7 +22,8 @@
     "./dist/*": "./dist/*"
   },
   "files": [
-    "dist"
+    "dist",
+    "builder.mjs"
   ],
   "dependencies": {
     "@nuxt/friendly-errors-webpack-plugin": "^2.6.0",
@@ -33,13 +37,14 @@
     "estree-walker": "^3.0.3",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
-    "h3": "^1.12.0",
+    "h3": "^1.13.0",
     "hash-sum": "^2.0.0",
+    "jiti": "^2.4.0",
     "lodash-es": "4.17.21",
-    "magic-string": "^0.30.11",
-    "memfs": "^4.11.1",
-    "mini-css-extract-plugin": "^2.9.1",
-    "mlly": "^1.7.1",
+    "magic-string": "^0.30.12",
+    "memfs": "^4.14.0",
+    "mini-css-extract-plugin": "^2.9.2",
+    "mlly": "^1.7.2",
     "ohash": "^1.1.4",
     "pathe": "^1.1.2",
     "pify": "^6.1.0",
@@ -53,27 +58,27 @@
     "time-fix-plugin": "^2.0.7",
     "ufo": "^1.5.4",
     "unenv": "^1.10.0",
-    "unplugin": "^1.14.1",
+    "unplugin": "^1.15.0",
     "url-loader": "^4.1.1",
-    "vue-bundle-renderer": "^2.1.0",
+    "vue-bundle-renderer": "^2.1.1",
     "vue-loader": "^17.4.2",
-    "webpack": "^5.94.0",
+    "webpack": "^5.96.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-dev-middleware": "^7.4.2",
     "webpack-hot-middleware": "^2.26.1",
-    "webpack-virtual-modules": "^0.6.2",
     "webpackbar": "^6.0.1",
-    "@nuxt/kit": "3.13.2"
+    "@nuxt/kit": "3.14.0"
   },
   "devDependencies": {
+    "@rspack/core": "1.0.14",
     "@types/hash-sum": "1.0.2",
     "@types/lodash-es": "4.17.12",
     "@types/pify": "5.0.4",
     "@types/webpack-bundle-analyzer": "4.7.0",
     "@types/webpack-hot-middleware": "2.25.9",
     "unbuild": "latest",
-    "vue": "3.5.5",
-    "@nuxt/schema": "3.13.2"
+    "vue": "3.5.12",
+    "@nuxt/schema": "3.14.0"
   },
   "peerDependencies": {
     "vue": "^3.3.4"