fix: read bundle assets via compiler.outputFileSystem

Instead of detecting memfs by constructor name, use the compiler's
outputFileSystem directly to read bundle files when it supports
readFileSync (e.g. memfs from webpack-dev-server 4+). Falls back
to native fs for webpack 4's NodeOutputFileSystem which lacks
readFileSync.

Fixes #471

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: Br1an67

src/BundleAnalyzerPlugin.js

@@ -181,6 +181,7 @@ class BundleAnalyzerPlugin {
         reportTitle: this.opts.reportTitle,
         compressionAlgorithm: this.opts.compressionAlgorithm,
         bundleDir: this.getBundleDirFromCompiler(),
+        outputFs: this.getOutputFsFromCompiler(),
         logger: this.logger,
         defaultSizes: this.opts.defaultSizes,
         excludeAssets: this.opts.excludeAssets,
@@ -202,6 +203,7 @@ class BundleAnalyzerPlugin {
       ),
       compressionAlgorithm: this.opts.compressionAlgorithm,
       bundleDir: this.getBundleDirFromCompiler(),
+      outputFs: this.getOutputFsFromCompiler(),
       logger: this.logger,
       excludeAssets: this.opts.excludeAssets,
     });
@@ -222,30 +224,34 @@ class BundleAnalyzerPlugin {
       reportTitle: this.opts.reportTitle,
       compressionAlgorithm: this.opts.compressionAlgorithm,
       bundleDir: this.getBundleDirFromCompiler(),
+      outputFs: this.getOutputFsFromCompiler(),
       logger: this.logger,
       defaultSizes: this.opts.defaultSizes,
       excludeAssets: this.opts.excludeAssets,
     });
   }
 
   getBundleDirFromCompiler() {
-    const outputFileSystemConstructor =
-      /** @type {OutputFileSystem} */
-      (/** @type {Compiler} */ (this.compiler).outputFileSystem).constructor;
+    return /** @type {Compiler} */ (this.compiler).outputPath;
+  }
 
-    if (typeof outputFileSystemConstructor === "undefined") {
-      return /** @type {Compiler} */ (this.compiler).outputPath;
-    }
-    switch (outputFileSystemConstructor.name) {
-      case "MemoryFileSystem":
-        return null;
-      // Detect AsyncMFS used by Nuxt 2.5 that replaces webpack's MFS during development
-      // Related: #274
-      case "AsyncMFS":
-        return null;
-      default:
-        return /** @type {Compiler} */ (this.compiler).outputPath;
+  /**
+   * Returns the compiler's outputFileSystem if it differs from the native fs
+   * and supports reading files (e.g. memfs used by webpack-dev-server),
+   * otherwise returns null to fall back to the native fs.
+   *
+   * @returns {OutputFileSystem | null}
+   */
+  getOutputFsFromCompiler() {
+    const outputFs = /** @type {Compiler} */ (this.compiler).outputFileSystem;
+    if (
+      outputFs &&
+      outputFs !== fs &&
+      typeof /** @type {EXPECTED_ANY} */ (outputFs).readFileSync === "function"
+    ) {
+      return /** @type {OutputFileSystem} */ (outputFs);
     }
+    return null;
   }
 }
 

src/analyzer.js

@@ -180,6 +180,7 @@ function isEntryModule(statsModule) {
  * @property {Logger} logger logger
  * @property {CompressionAlgorithm} compressionAlgorithm compression algorithm
  * @property {ExcludeAssets} excludeAssets exclude assets
+ * @property {import("webpack").OutputFileSystem | null=} outputFs non-default filesystem for reading bundle files
  */
 
 /** @typedef {import("./tree/Module").ModuleChartData} ModuleChartData */
@@ -216,6 +217,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
     logger = new Logger(),
     compressionAlgorithm = "gzip",
     excludeAssets = null,
+    outputFs = null,
   } = opts || {};
 
   const isAssetIncluded = createAssetsFilter(excludeAssets);
@@ -286,6 +288,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
       try {
         bundleInfo = parseBundle(assetFile, {
           sourceType: statAsset.info.javascriptModule ? "module" : "script",
+          ...(outputFs && { fs: outputFs }),
         });
       } catch (err) {
         const msg =

src/parseUtils.js

@@ -323,13 +323,13 @@ function isAsyncWebWorkerChunkExpression(node) {
 
 /**
  * @param {string} bundlePath bundle path
- * @param {{ sourceType: "script" | "module" }} opts options
+ * @param {{ sourceType: "script" | "module", fs?: import("webpack").OutputFileSystem }} opts options
  * @returns {{ modules: Modules, src: string, runtimeSrc: string }} parsed result
  */
 module.exports.parseBundle = function parseBundle(bundlePath, opts) {
-  const { sourceType = "script" } = opts || {};
+  const { sourceType = "script", fs: bundleFs = fs } = opts || {};
 
-  const content = fs.readFileSync(bundlePath, "utf8");
+  const content = /** @type {string} */ (bundleFs.readFileSync(bundlePath, "utf8"));
   const ast = acorn.parse(content, {
     sourceType,
     ecmaVersion: "latest",

src/viewer.js

@@ -107,6 +107,7 @@ function getChartData(analyzerOpts, bundleStats, bundleDir) {
  * @property {string} host host
  * @property {boolean} openBrowser true when need to open browser, otherwise false
  * @property {string | null} bundleDir bundle dir
+ * @property {import("webpack").OutputFileSystem | null=} outputFs filesystem for reading bundle files
  * @property {Logger} logger logger
  * @property {Sizes} defaultSizes default sizes
  * @property {CompressionAlgorithm} compressionAlgorithm compression algorithm
@@ -128,6 +129,7 @@ async function startServer(bundleStats, opts) {
     host = "127.0.0.1",
     openBrowser = true,
     bundleDir = null,
+    outputFs,
     logger = new Logger(),
     defaultSizes = "parsed",
     compressionAlgorithm,
@@ -136,7 +138,7 @@ async function startServer(bundleStats, opts) {
     analyzerUrl,
   } = opts || {};
 
-  const analyzerOpts = { logger, excludeAssets, compressionAlgorithm };
+  const analyzerOpts = { logger, excludeAssets, compressionAlgorithm, outputFs };
 
   let chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
 
@@ -240,6 +242,7 @@ async function startServer(bundleStats, opts) {
  * @property {string} reportFilename report filename
  * @property {ReportTitle} reportTitle report title
  * @property {string | null} bundleDir bundle dir
+ * @property {import("webpack").OutputFileSystem | null=} outputFs filesystem for reading bundle files
  * @property {Logger} logger logger
  * @property {Sizes} defaultSizes default sizes
  * @property {CompressionAlgorithm} compressionAlgorithm compression algorithm
@@ -257,14 +260,15 @@ async function generateReport(bundleStats, opts) {
     reportFilename,
     reportTitle,
     bundleDir = null,
+    outputFs,
     logger = new Logger(),
     defaultSizes = "parsed",
     compressionAlgorithm,
     excludeAssets = null,
   } = opts || {};
 
   const chartData = getChartData(
-    { logger, excludeAssets, compressionAlgorithm },
+    { logger, excludeAssets, compressionAlgorithm, outputFs },
     bundleStats,
     bundleDir,
   );
@@ -302,6 +306,7 @@ async function generateReport(bundleStats, opts) {
  * @typedef {object} GenerateJSONReportOptions
  * @property {string} reportFilename report filename
  * @property {string | null} bundleDir bundle dir
+ * @property {import("webpack").OutputFileSystem | null=} outputFs filesystem for reading bundle files
  * @property {Logger} logger logger
  * @property {ExcludeAssets} excludeAssets exclude assets
  * @property {CompressionAlgorithm} compressionAlgorithm compression algorithm
@@ -316,13 +321,14 @@ async function generateJSONReport(bundleStats, opts) {
   const {
     reportFilename,
     bundleDir = null,
+    outputFs,
     logger = new Logger(),
     excludeAssets = null,
     compressionAlgorithm,
   } = opts || {};
 
   const chartData = getChartData(
-    { logger, excludeAssets, compressionAlgorithm },
+    { logger, excludeAssets, compressionAlgorithm, outputFs },
     bundleStats,
     bundleDir,
   );