fix: unpredictably Webpack compilation fails after a random number of runs, #143

Author: webdiscus

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.15.2 (2025-01-22)
+
+- fix: unpredictably Webpack compilation fails after a random number of runs, #143
+
 ## 4.15.1 (2025-01-21)
 
 - fix: improve the handling exceptions in the integrity module, #143

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.15.1",
+  "version": "4.15.2",
   "description": "Generates complete single-page or multi-page website from source assets. Build-in support for Markdown, Eta, EJS, Handlebars, Nunjucks, Pug. Alternative to html-webpack-plugin.",
   "keywords": [
     "html",

src/Plugin/AssetEntry.js

@@ -87,6 +87,12 @@ class AssetEntry {
   // entry: { __prefix__index: './index.html', index: './index.js' }
   entryNamePrefix = '__bundler-plugin-entry__';
 
+  /**
+   * Unique last index for each file with the same name.
+   * @type {Object<file: string, index: number>}
+   */
+  uniqueEntryNameIndex = {};
+
   /**
    *
    * @param {{}} pluginOption
@@ -219,18 +225,6 @@ class AssetEntry {
     return files;
   }
 
-  /**
-   * Whether the entry is unique.
-   *
-   * @param {string} name The name of the entry.
-   * @param {string} file The source file.
-   * @return {boolean}
-   */
-  isUnique(name, file) {
-    const entry = this.entriesByName.get(name);
-    return !entry || entry.sourceFile === file;
-  }
-
   /**
    * Whether the output filename is a template entrypoint.
    *
@@ -513,7 +507,8 @@ class AssetEntry {
         isStyle: this.pluginOption.isStyle(sourceFile),
       };
 
-      this.#add(entry, assetEntryOptions);
+      this.#cacheEntry(assetEntryOptions);
+      this.#setFilename(entry, assetEntryOptions);
     }
   }
 
@@ -539,7 +534,7 @@ class AssetEntry {
 
     this.removedEntries.delete(file);
 
-    if (this.#exists(name, file)) return;
+    if (this.#hasEntry(name, file)) return;
 
     const entries = {};
     const entrypoint = { import: [file], filename: '[name].html' };
@@ -594,19 +589,23 @@ class AssetEntry {
   /**
    * Add a script to webpack compilation.
    *
-   * @param {string} name
+   * @param {string|null} name The entry name.
    * @param {string} importFile The resource, including a query.
    * @param {string} filenameTemplate
    * @param {string} context
    * @param {string} issuer
-   * @return {boolean} Return true if new file was added, if a file exists then return false.
+   * @return {string} Return the unique entry name.
    */
   addToCompilation({ name, importFile, filenameTemplate, context, issuer }) {
+    name = this.#getUniqueEntryName(name, importFile);
+
     // skip duplicate entries
-    if (this.#exists(name, importFile)) {
-      return false;
+    if (this.#hasEntry(name, importFile)) {
+      return name;
     }
 
+    const compiler = this.compiler;
+    const compilation = this.compilation;
     let [sourceFile] = importFile.split('?', 1);
 
     const entryOptions = {
@@ -636,33 +635,69 @@ class AssetEntry {
       isTemplate: false,
     };
 
-    this.#add(entryOptions, assetEntryOptions);
-    this.compilationEntryNames.add(name);
-
-    const compiler = this.compiler;
-    const compilation = this.compilation;
     const { EntryPlugin } = compiler.webpack;
     const entryDependency = EntryPlugin.createDependency(importFile, { name });
 
-    compilation.addEntry(context, entryDependency, entryOptions, (err, module) => {
-      if (err) throw new Error(err);
+    this.#cacheEntry(assetEntryOptions);
+    this.compilationEntryNames.add(name);
+
+    compilation.addEntry(context, entryDependency, entryOptions, (error, module) => {
+      if (error) {
+        throw new Error(error.toString());
+      }
+
+      // fix #143: if the same entry already exists, it caused Webpack error:
+      // "Conflicting entry option filename () => {...} vs () => {...}".
+      // This is a Webpack issue, occurs unpredictably, after a random number of runs
+      // when the sequence of processing modules is changed sporadically.
+      if (module) {
+        // assign a custom filename function only after the module has been successfully created
+        this.#setFilename(entryOptions, assetEntryOptions);
+      }
     });
 
     // add missing dependencies after rebuild
     if (PluginService.isWatchMode(compiler)) {
       new EntryPlugin(context, importFile, { name }).apply(compiler);
     }
 
-    return true;
+    return name;
   }
 
   /**
+   * @param {string|null} name The entry name.
+   * @param {string} file The source file.
+   * @return {string } Return unique entry name.
+   */
+  #getUniqueEntryName(name, file) {
+    if (!name) {
+      name = path.parse(file).name;
+    }
+
+    let uniqueName = name;
+    let hasEntry = this.compilation.entries.has(name);
+
+    // the entrypoint name must be unique, if already exists then add an index: `main` => `main.1`, etc.
+    if (hasEntry) {
+      // create unique name
+      if (!this.uniqueEntryNameIndex[name]) {
+        this.uniqueEntryNameIndex[name] = 1;
+      }
+      uniqueName += '.' + this.uniqueEntryNameIndex[name]++;
+    }
+
+    return uniqueName;
+  }
+
+  /**
+   * Sets the filename as a function for a given entry.
+   * This function processes the filename template and applies adjustments.
+   *
    * @param {EntryOptions} entry The Webpack entry option object.
    * @param {AssetEntryOptions} assetEntryOptions
-   * @private
    */
-  #add(entry, assetEntryOptions) {
-    const { name, originalName, filenameTemplate, outputPath } = assetEntryOptions;
+  #setFilename(entry, assetEntryOptions) {
+    const { originalName, filenameTemplate, outputPath } = assetEntryOptions;
 
     if (path.isAbsolute(outputPath)) {
       assetEntryOptions.publicPath = path.relative(this.pluginOption.getWebpackOutputPath(), outputPath);
@@ -675,6 +710,7 @@ class AssetEntry {
       let filename = filenameTemplate;
 
       if (isFunction(filenameTemplate)) {
+        // type PathData: https://webpack.js.org/configuration/output/#template-strings
         // clone the pathData object to modify the chunk object w/o side effects in the main compilation
         const pathDataCloned = { ...pathData };
         pathDataCloned.chunk = { ...pathDataCloned.chunk };
@@ -687,6 +723,9 @@ class AssetEntry {
         if (pathDataCloned.filename == null) {
           pathDataCloned.filename = assetEntryOptions.sourceFile;
         }
+        // note: resource is full path including URL queries
+        // TODO: undocumented non-standard additional property, should be perhaps into filename?
+        pathDataCloned.resource = assetEntryOptions.resource;
 
         filename = filenameTemplate(pathDataCloned, assetInfo);
       }
@@ -698,11 +737,19 @@ class AssetEntry {
       return filename;
     };
 
-    entry.filename = filenameFn;
-    assetEntryOptions.filenameFn = filenameFn;
+    entry.filename = assetEntryOptions.filenameFn = filenameFn;
+  }
+
+  /**
+   * Save already added entry to cache.
+   *
+   * @param {AssetEntryOptions} assetEntryOptions
+   */
+  #cacheEntry(assetEntryOptions) {
+    const { name, id } = assetEntryOptions;
 
     this.entriesByName.set(name, assetEntryOptions);
-    this.entriesById.set(assetEntryOptions.id, assetEntryOptions);
+    this.entriesById.set(id, assetEntryOptions);
   }
 
   /**
@@ -713,8 +760,9 @@ class AssetEntry {
    * @return {boolean}
    * @private
    */
-  #exists(name, importFile) {
+  #hasEntry(name, importFile) {
     const entry = this.entriesByName.get(name);
+
     return entry != null && entry.importFile === importFile;
   }
 
@@ -723,6 +771,7 @@ class AssetEntry {
    * Called only once when the plugin is applied.
    */
   clear() {
+    this.uniqueEntryNameIndex = {};
     this.idIndex = 1;
     this.data.clear();
     this.entriesByName.clear();
@@ -734,6 +783,16 @@ class AssetEntry {
    * Called before each new compilation after changes, in the serve/watch mode.
    */
   reset() {
+    // don't clear the uniqueEntryNameIndex
+    // test case:
+    // there are 3 entries: home.html, news.html and about.html
+    // 1. add the `script.js` to the home.html => script.js
+    // 2. add the `script.js` to the news.html => script.1.js
+    // 3. add the `script.js` to the about.html => script.2.js
+    // but when the index is cleared, then after adding the file with the same name will be not unique
+    // and is generated a js file having a wrong content
+    //this.uniqueEntryNameIndex = {};
+
     for (const entryName of this.compilationEntryNames) {
       const entry = this.entriesByName.get(entryName);
       if (entry) {

src/Plugin/Collection.js

@@ -66,12 +66,6 @@ class Collection {
   /** @type {Map<string, string | Array<string>>} The map of source file to output file */
   manifest = new Map();
 
-  /**
-   * Unique last index for each file with the same name.
-   * @type {Object<file: string, index: number>}
-   */
-  index = {};
-
   importStyleEsModule = true;
   orderedResources = new Map();
   importStyleRootIssuers = new Set();
@@ -113,20 +107,21 @@ class Collection {
   }
 
   /**
-   * @param {string} name
+   * @param {string?} name The entry name.
    * @param {string} resource
    * @param {string} issuer
+   * @return {string} Return the unique entry name.
    */
   #addToCompilation({ name, resource, issuer }) {
     const entry = {
-      name,
+      name: name,
       importFile: resource,
       filenameTemplate: this.pluginOption.getJs().filename,
       context: path.dirname(issuer),
       issuer,
     };
 
-    this.assetEntry.addToCompilation(entry);
+    return this.assetEntry.addToCompilation(entry);
   }
 
   /**
@@ -512,26 +507,6 @@ class Collection {
     return null;
   }
 
-  /**
-   * @param {string} file The source file of script.
-   * @return {string } Return unique assetFile
-   */
-  createUniqueName(file) {
-    const { name } = path.parse(file);
-    let uniqueName = name;
-
-    // the entrypoint name must be unique, if already exists then add an index: `main` => `main.1`, etc.
-    if (!this.assetEntry.isUnique(name, file)) {
-      // create unique name
-      if (!this.index[name]) {
-        this.index[name] = 1;
-      }
-      uniqueName = name + '.' + this.index[name]++;
-    }
-
-    return uniqueName;
-  }
-
   /**
    * Find styles from all nested JS files.
    *
@@ -722,8 +697,7 @@ class Collection {
         name = this.assets.get(resource)?.name;
 
         if (!name) {
-          name = this.createUniqueName(resource);
-          this.#addToCompilation({ name, resource, issuer });
+          name = this.#addToCompilation({ resource, issuer });
         }
 
         inline = undefined;
@@ -1172,7 +1146,6 @@ class Collection {
    * Called only once when the plugin is applied.
    */
   clear() {
-    this.index = {};
     this.data.clear();
     this.assets.clear();
     this.orderedResources.clear();
@@ -1186,16 +1159,6 @@ class Collection {
    * Called before each new compilation after changes, in the serve/watch mode.
    */
   reset() {
-    // don't clear the index
-    // test case:
-    // there are 3 entries: home.html, news.html and about.html
-    // 1. add the `script.js` to the home.html => script.js
-    // 2. add the `script.js` to the news.html => script.1.js
-    // 3. add the `script.js` to the about.html => script.2.js
-    // but when the index is cleared, then after adding the file with the same name will be not unique
-    // and is generated a js file having a wrong content
-    //this.index = {};
-
     // don't delete entry data, clear only assets
     this.data.forEach((item, key) => {
       if (item.assets != null) item.assets = [];