html-webpack-plugin 3.1.0 → 4.0.0-alpha.2

package/lib/chunksorter.js

@@ -1,99 +1,12 @@
+// @ts-check
+/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
 'use strict';
 
-const toposort = require('toposort');
-const _ = require('lodash');
-
-/**
-  Sorts dependencies between chunks by their "parents" attribute.
-
-  This function sorts chunks based on their dependencies with each other.
-  The parent relation between chunks as generated by Webpack for each chunk
-  is used to define a directed (and hopefully acyclic) graph, which is then
-  topologically sorted in order to retrieve the correct order in which
-  chunks need to be embedded into HTML. A directed edge in this graph is
-  describing a "is parent of" relationship from a chunk to another (distinct)
-  chunk. Thus topological sorting orders chunks from bottom-layer chunks to
-  highest level chunks that use the lower-level chunks.
-
-  @param {Array} chunks an array of chunks as generated by the html-webpack-plugin.
-  - For webpack < 4, It is assumed that each entry contains at least the properties
-  "id" (containing the chunk id) and "parents" (array containing the ids of the
-  parent chunks).
-  - For webpack 4+ the see the chunkGroups param for parent-child relationships
-
-  @param {Array} chunks an array of ChunkGroups that has a getParents method.
-  Each ChunkGroup contains a list of chunks in order.
-
-  @return {Array} A topologically sorted version of the input chunks
-*/
-module.exports.dependency = (chunks, chunkGroups) => {
-  if (!chunks) {
-    return chunks;
-  }
-
-  // We build a map (chunk-id -> chunk) for faster access during graph building.
-  const nodeMap = {};
-
-  chunks.forEach(chunk => {
-    nodeMap[chunk.id] = chunk;
-  });
-
-  // Next, we add an edge for each parent relationship into the graph
-  let edges = [];
-
-  if (chunkGroups) {
-    // Add an edge for each parent (parent -> child)
-    edges = chunkGroups.reduce((result, chunkGroup) => result.concat(
-      Array.from(chunkGroup.parentsIterable, parentGroup => [parentGroup, chunkGroup])
-    ), []);
-    const sortedGroups = toposort.array(chunkGroups, edges);
-    // flatten chunkGroup into chunks
-    const sortedChunks = sortedGroups
-      .reduce((result, chunkGroup) => result.concat(chunkGroup.chunks), [])
-      .map(chunk => // use the chunk from the list passed in, since it may be a filtered list
-    nodeMap[chunk.id])
-      .filter((chunk, index, self) => {
-        // make sure exists (ie excluded chunks not in nodeMap)
-        const exists = !!chunk;
-        // make sure we have a unique list
-        const unique = self.indexOf(chunk) === index;
-        return exists && unique;
-      });
-    return sortedChunks;
-  } else {
-    // before webpack 4 there was no chunkGroups
-    chunks.forEach(chunk => {
-      if (chunk.parents) {
-        // Add an edge for each parent (parent -> child)
-        chunk.parents.forEach(parentId => {
-          // webpack2 chunk.parents are chunks instead of string id(s)
-          const parentChunk = _.isObject(parentId) ? parentId : nodeMap[parentId];
-          // If the parent chunk does not exist (e.g. because of an excluded chunk)
-          // we ignore that parent
-          if (parentChunk) {
-            edges.push([parentChunk, chunk]);
-          }
-        });
-      }
-    });
-    // We now perform a topological sorting on the input chunks and built edges
-    return toposort.array(chunks, edges);
-  }
-};
-
 /**
- * Sorts the chunks based on the chunk id.
- *
- * @param  {Array} chunks the list of chunks to sort
- * @return {Array} The sorted list of chunks
+ * @type {{[sortmode: string] : (entryPointNames: Array<string>, compilation, htmlWebpackPluginOptions) => Array<string> }}
+ * This file contains different sort methods for the entry chunks names
  */
-module.exports.id = chunks => chunks.sort(function orderEntryLast (a, b) {
-  if (a.entry !== b.entry) {
-    return b.entry ? 1 : -1;
-  } else {
-    return b.id - a.id;
-  }
-});
+module.exports = {};
 
 /**
  * Performs identity mapping (no-sort).
@@ -104,34 +17,24 @@ module.exports.none = chunks => chunks;
 
 /**
  * Sort manually by the chunks
- * @param  {Array} chunks the chunks to sort
- * @return {Array} The sorted chunks
+ * @param  {string[]} entryPointNames the chunks to sort
+ * @param  {WebpackCompilation} compilation the webpack compilation
+ * @param  htmlWebpackPluginOptions the plugin options
+ * @return {string[]} The sorted chunks
  */
-module.exports.manual = (chunks, specifyChunks) => {
-  const chunksResult = [];
-  let filterResult = [];
-  if (Array.isArray(specifyChunks)) {
-    for (var i = 0; i < specifyChunks.length; i++) {
-      filterResult = chunks.filter(chunk => {
-        if (chunk.names[0] && chunk.names[0] === specifyChunks[i]) {
-          return true;
-        }
-        return false;
-      });
-      filterResult.length > 0 && chunksResult.push(filterResult[0]);
-    }
+module.exports.manual = (entryPointNames, compilation, htmlWebpackPluginOptions) => {
+  const chunks = htmlWebpackPluginOptions.chunks;
+  if (!Array.isArray(chunks)) {
+    return entryPointNames;
   }
-  return chunksResult;
+  // Remove none existing entries from
+  // htmlWebpackPluginOptions.chunks
+  return chunks.filter((entryPointName) => {
+    return compilation.entrypoints.has(entryPointName);
+  });
 };
 
 /**
  * Defines the default sorter.
  */
-module.exports.auto = module.exports.id;
-
-// In webpack 2 the ids have been flipped.
-// Therefore the id sort doesn't work the same way as it did for webpack 1
-// Luckily the dependency sort is working as expected
-if (Number(require('webpack/package.json').version.split('.')[0]) > 1) {
-  module.exports.auto = module.exports.dependency;
-}
+module.exports.auto = module.exports.none;

package/lib/compiler.js

@@ -1,11 +1,16 @@
-/*
+// @ts-check
+/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
+/** @typedef {import("webpack/lib/Compiler.js")} WebpackCompiler */
+/** @typedef {import("webpack/lib/Chunk.js")} WebpackChunk */
+'use strict';
+/**
+ * @file
  * This file uses webpack to compile a template with a child compiler.
  *
  * [TEMPLATE] -> [JAVASCRIPT]
  *
  */
 'use strict';
-const path = require('path');
 const NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin');
 const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
 const LoaderTargetPlugin = require('webpack/lib/LoaderTargetPlugin');
@@ -13,113 +18,366 @@ const LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');
 const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
 
 /**
- * Compiles the template into a nodejs factory, adds its to the compilation.assets
- * and returns a promise of the result asset object.
- *
- * @param template relative path to the template file
- * @param context path context
- * @param outputFilename the file name
- * @param compilation The webpack compilation object
- *
- * Returns an object:
- * {
- *  hash: {String} - Base64 hash of the file
- *  content: {String} - Javascript executable code of the template
- * }
- *
+ * The HtmlWebpackChildCompiler is a helper to allow resusing one childCompiler
+ * for multile HtmlWebpackPlugin instances to improve the compilation performance.
  */
-module.exports.compileTemplate = function compileTemplate (template, context, outputFilename, compilation) {
-  // The entry file is just an empty helper as the dynamic template
-  // require is added in "loader.js"
-  const outputOptions = {
-    filename: outputFilename,
-    publicPath: compilation.outputOptions.publicPath
-  };
-  // Store the result of the parent compilation before we start the child compilation
-  const assetsBeforeCompilation = Object.assign({}, compilation.assets[outputOptions.filename]);
-  // Create an additional child compiler which takes the template
-  // and turns it into an Node.JS html factory.
-  // This allows us to use loaders during the compilation
-  const compilerName = getCompilerName(context, outputFilename);
-  const childCompiler = compilation.createChildCompiler(compilerName, outputOptions);
-  childCompiler.context = context;
-  new NodeTemplatePlugin(outputOptions).apply(childCompiler);
-  new NodeTargetPlugin().apply(childCompiler);
-  new LibraryTemplatePlugin('HTML_WEBPACK_PLUGIN_RESULT', 'var').apply(childCompiler);
-
-  // Using undefined as name for the SingleEntryPlugin causes a unexpected output as described in
-  // https://github.com/jantimon/html-webpack-plugin/issues/895
-  // Using a string as a name for the SingleEntryPlugin causes problems with HMR as described in
-  // https://github.com/jantimon/html-webpack-plugin/issues/900
-  // Until the HMR issue is fixed we keep the ugly output:
-  new SingleEntryPlugin(this.context, template, undefined).apply(childCompiler);
-
-  new LoaderTargetPlugin('node').apply(childCompiler);
-
-  // Fix for "Uncaught TypeError: __webpack_require__(...) is not a function"
-  // Hot module replacement requires that every child compiler has its own
-  // cache. @see https://github.com/ampedandwired/html-webpack-plugin/pull/179
-
-  // Backwards compatible version of: childCompiler.hooks.compilation
-  (childCompiler.hooks ? childCompiler.hooks.compilation.tap.bind(childCompiler.hooks.compilation, 'HtmlWebpackPlugin') : childCompiler.plugin.bind(childCompiler, 'compilation'))(compilation => {
-    if (compilation.cache) {
-      if (!compilation.cache[compilerName]) {
-        compilation.cache[compilerName] = {};
-      }
-      compilation.cache = compilation.cache[compilerName];
+class HtmlWebpackChildCompiler {
+  constructor () {
+    /**
+     * @type {string[]} templateIds
+     * The template array will allow us to keep track which input generated which output
+     */
+    this.templates = [];
+    /**
+     * @type {Promise<{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}>}
+     */
+    this.compilationPromise;
+    /**
+     * @type {number}
+     */
+    this.compilationStartedTimestamp;
+    /**
+     * @type {number}
+     */
+    this.compilationEndedTimestamp;
+    /**
+     * All file dependencies of the child compiler
+     * @type {string[]}
+     */
+    this.fileDependencies = [];
+  }
+
+  /**
+   * Add a templatePath to the child compiler
+   * The given template will be compiled by `compileTemplates`
+   * @param {string} template - The webpack path to the template e.g. `'!!html-loader!index.html'`
+   * @returns {boolean} true if the template is new
+   */
+  addTemplate (template) {
+    const templateId = this.templates.indexOf(template);
+    // Don't add the template to the compiler if a similar template was already added
+    if (templateId !== -1) {
+      return false;
     }
-  });
+    // A child compiler can compile only once
+    // throw an error if a new template is added after the compilation started
+    if (this.isCompiling()) {
+      throw new Error('New templates can only be added before `compileTemplates` was called.');
+    }
+    // Add the template to the childCompiler
+    this.templates.push(template);
+    // Mark the cache invalid
+    return true;
+  }
 
-  // Compile and return a promise
-  return new Promise((resolve, reject) => {
-    childCompiler.runAsChild((err, entries, childCompilation) => {
-      // Resolve / reject the promise
-      if (childCompilation && childCompilation.errors && childCompilation.errors.length) {
-        const errorDetails = childCompilation.errors.map(error => error.message + (error.error ? ':\n' + error.error : '')).join('\n');
-        reject(new Error('Child compilation failed:\n' + errorDetails));
-      } else if (err) {
-        reject(err);
-      } else {
-        // Replace [hash] placeholders in filename
-        // In webpack 4 the plugin interface changed, so check for available fns
-        const outputName = compilation.mainTemplate.getAssetPath
-          ? compilation.mainTemplate.hooks.assetPath.call(outputOptions.filename, {
-            hash: childCompilation.hash,
-            chunk: entries[0]
-          })
-          : compilation.mainTemplate.applyPluginsWaterfall(
-              'asset-path',
-              outputOptions.filename,
-            {
-              hash: childCompilation.hash,
-              chunk: entries[0]
-            });
-
-        // Restore the parent compilation to the state like it
-        // was before the child compilation
-        compilation.assets[outputName] = assetsBeforeCompilation[outputName];
-        if (assetsBeforeCompilation[outputName] === undefined) {
-          // If it wasn't there - delete it
-          delete compilation.assets[outputName];
+  /**
+   * Returns true if the childCompiler is currently compiling
+   * @retuns {boolean}
+   */
+  isCompiling () {
+    return !this.didCompile() && this.compilationStartedTimestamp !== undefined;
+  }
+
+  /**
+   * Returns true if the childCOmpiler is done compiling
+   */
+  didCompile () {
+    return this.compilationEndedTimestamp !== undefined;
+  }
+
+  /**
+   * This function will start the template compilation
+   * once it is started no more templates can be added
+   *
+   * @param {WebpackCompilation} mainCompilation
+   * @returns {Promise<{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}>}
+   */
+  compileTemplates (mainCompilation) {
+    // To prevent multiple compilations for the same template
+    // the compilation is cached in a promise.
+    // If it already exists return
+    if (this.compilationPromise) {
+      return this.compilationPromise;
+    }
+
+    // The entry file is just an empty helper as the dynamic template
+    // require is added in "loader.js"
+    const outputOptions = {
+      filename: '__child-[name]',
+      publicPath: mainCompilation.outputOptions.publicPath
+    };
+    const compilerName = 'HtmlWebpackCompiler';
+    // Create an additional child compiler which takes the template
+    // and turns it into an Node.JS html factory.
+    // This allows us to use loaders during the compilation
+    const childCompiler = mainCompilation.createChildCompiler(compilerName, outputOptions);
+    // The file path context which webpack uses to resolve all relative files to
+    childCompiler.context = mainCompilation.compiler.context;
+    // Compile the template to nodejs javascript
+    new NodeTemplatePlugin(outputOptions).apply(childCompiler);
+    new NodeTargetPlugin().apply(childCompiler);
+    new LibraryTemplatePlugin('HTML_WEBPACK_PLUGIN_RESULT', 'var').apply(childCompiler);
+    new LoaderTargetPlugin('node').apply(childCompiler);
+
+    // Fix for "Uncaught TypeError: __webpack_require__(...) is not a function"
+    // Hot module replacement requires that every child compiler has its own
+    // cache. @see https://github.com/ampedandwired/html-webpack-plugin/pull/179
+    childCompiler.hooks.compilation.tap('HtmlWebpackPlugin', compilation => {
+      if (compilation.cache) {
+        if (!compilation.cache[compilerName]) {
+          compilation.cache[compilerName] = {};
         }
-        resolve({
-          // Hash of the template entry point
-          hash: entries[0].hash,
-          // Output name
-          outputName: outputName,
-          // Compiled code
-          content: childCompilation.assets[outputName].source()
-        });
+        compilation.cache = compilation.cache[compilerName];
       }
     });
+
+    // Add all templates
+    this.templates.forEach((template, index) => {
+      new SingleEntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}`).apply(childCompiler);
+    });
+
+    this.compilationStartedTimestamp = new Date().getTime();
+    this.compilationPromise = new Promise((resolve, reject) => {
+      childCompiler.runAsChild((err, entries, childCompilation) => {
+        // Extract templates
+        const compiledTemplates = entries
+          ? extractHelperFilesFromCompilation(mainCompilation, childCompilation, outputOptions.filename, entries)
+          : [];
+        // Extract file dependencies
+        if (entries) {
+          this.fileDependencies = extractFileDependenciesFilesFromCompilation(entries);
+        }
+        // Reject the promise if the childCompilation contains error
+        if (childCompilation && childCompilation.errors && childCompilation.errors.length) {
+          const errorDetails = childCompilation.errors.map(error => error.message + (error.error ? ':\n' + error.error : '')).join('\n');
+          reject(new Error('Child compilation failed:\n' + errorDetails));
+          return;
+        }
+        // Reject if the error object contains errors
+        if (err) {
+          reject(err);
+          return;
+        }
+        /**
+         * @type {{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}}
+         */
+        const result = {};
+        compiledTemplates.forEach((templateSource, entryIndex) => {
+          // The compiledTemplates are generated from the entries added in
+          // the addTemplate function.
+          // Therefore the array index of this.templates should be the as entryIndex.
+          result[this.templates[entryIndex]] = {
+            content: templateSource,
+            hash: childCompilation.hash,
+            entry: entries[entryIndex]
+          };
+        });
+        this.compilationEndedTimestamp = new Date().getTime();
+        resolve(result);
+      });
+    });
+
+    return this.compilationPromise;
+  }
+}
+
+/**
+ * The webpack child compilation will create files as a side effect.
+ * This function will extract them and clean them up so they won't be written to disk.
+ *
+ * Returns the source code of the compiled templates as string
+ *
+ * @returns Array<string>
+ */
+function extractHelperFilesFromCompilation (mainCompilation, childCompilation, filename, childEntryChunks) {
+  const helperAssetNames = childEntryChunks.map((entryChunk, index) => {
+    return mainCompilation.mainTemplate.hooks.assetPath.call(filename, {
+      hash: childCompilation.hash,
+      chunk: entryChunk,
+      name: `HtmlWebpackPlugin_${index}`
+    });
   });
-};
+
+  helperAssetNames.forEach((helperFileName) => {
+    delete mainCompilation.assets[helperFileName];
+  });
+
+  const helperContents = helperAssetNames.map((helperFileName) => {
+    return childCompilation.assets[helperFileName].source();
+  });
+
+  return helperContents;
+}
+
+/**
+ * Return all file dependencies from the given set of entries.
+ * @param {WebpackChunk[]} entries
+ * @returns {string[]}
+ */
+function extractFileDependenciesFilesFromCompilation (entries) {
+  const fileDependencies = new Map();
+  entries.forEach((entry) => {
+    entry.entryModule.buildInfo.fileDependencies.forEach((fileDependency) => {
+      fileDependencies.set(fileDependency, true);
+    });
+  });
+  return Array.from(fileDependencies.keys());
+}
+
+/**
+ * @type {WeakMap<WebpackCompiler, HtmlWebpackChildCompiler>}}
+ */
+const childCompilerCache = new WeakMap();
+
+/**
+ * Get child compiler from cache or a new child compiler for the given mainCompilation
+ *
+ * @param {WebpackCompiler} mainCompiler
+ */
+function getChildCompiler (mainCompiler) {
+  const cachedChildCompiler = childCompilerCache.get(mainCompiler);
+  if (cachedChildCompiler) {
+    return cachedChildCompiler;
+  }
+  const newCompiler = new HtmlWebpackChildCompiler();
+  childCompilerCache.set(mainCompiler, newCompiler);
+  return newCompiler;
+}
+
+/**
+ * Remove the childCompiler from the cache
+ *
+ * @param {WebpackCompiler} mainCompiler
+ */
+function clearCache (mainCompiler) {
+  const childCompiler = getChildCompiler(mainCompiler);
+  // If this childCompiler was already used
+  // remove the entire childCompiler from the cache
+  if (childCompiler.isCompiling() || childCompiler.didCompile()) {
+    childCompilerCache.delete(mainCompiler);
+  }
+}
+
+/**
+ * Register a template for the current main compiler
+ * @param {WebpackCompiler} mainCompiler
+ * @param {string} templatePath
+ */
+function addTemplateToCompiler (mainCompiler, templatePath) {
+  const childCompiler = getChildCompiler(mainCompiler);
+  const isNew = childCompiler.addTemplate(templatePath);
+  if (isNew) {
+    clearCache(mainCompiler);
+  }
+}
+
+/**
+ * Starts the compilation for all templates.
+ * This has to be called once all templates where added.
+ *
+ * If this function is called multiple times it will use a cache inside
+ * the childCompiler
+ *
+ * @param {string} templatePath
+ * @param {string} outputFilename
+ * @param {WebpackCompilation} mainCompilation
+ */
+function compileTemplate (templatePath, outputFilename, mainCompilation) {
+  const childCompiler = getChildCompiler(mainCompilation.compiler);
+  return childCompiler.compileTemplates(mainCompilation).then((compiledTemplates) => {
+    if (!compiledTemplates[templatePath]) console.log(Object.keys(compiledTemplates), templatePath);
+    const compiledTemplate = compiledTemplates[templatePath];
+    // Replace [hash] placeholders in filename
+    const outputName = mainCompilation.mainTemplate.hooks.assetPath.call(outputFilename, {
+      hash: compiledTemplate.hash,
+      chunk: compiledTemplate.entry
+    });
+    return {
+      // Hash of the template entry point
+      hash: compiledTemplate.hash,
+      // Output name
+      outputName: outputName,
+      // Compiled code
+      content: compiledTemplate.content
+    };
+  });
+}
+
+/**
+ * Return all file dependencies of the last child compilation
+ *
+ * @param {WebpackCompiler} compiler
+ * @returns {Array<string>}
+ */
+function getFileDependencies (compiler) {
+  const childCompiler = getChildCompiler(compiler);
+  return childCompiler.fileDependencies;
+}
+
+/**
+ * @type {WeakMap<WebpackCompilation, WeakMap<HtmlWebpackChildCompiler, boolean>>}}
+ */
+const hasOutdatedCompilationDependenciesMap = new WeakMap();
+/**
+ * Returns `true` if the file dependencies of the current childCompiler
+ * for the given mainCompilation are outdated.
+ *
+ * Uses the `hasOutdatedCompilationDependenciesMap` cache if possible.
+ *
+ * @param {WebpackCompilation} mainCompilation
+ * @returns {boolean}
+ */
+function hasOutDatedTemplateCache (mainCompilation) {
+  const childCompiler = getChildCompiler(mainCompilation.compiler);
+  /**
+   * @type {WeakMap<HtmlWebpackChildCompiler, boolean>|undefined}
+   */
+  let hasOutdatedChildCompilerDependenciesMap = hasOutdatedCompilationDependenciesMap.get(mainCompilation);
+  // Create map for childCompiler if none exist
+  if (!hasOutdatedChildCompilerDependenciesMap) {
+    hasOutdatedChildCompilerDependenciesMap = new WeakMap();
+    hasOutdatedCompilationDependenciesMap.set(mainCompilation, hasOutdatedChildCompilerDependenciesMap);
+  }
+  // Try to get the `checkChildCompilerCache` result from cache
+  let isOutdated = hasOutdatedChildCompilerDependenciesMap.get(childCompiler);
+  if (isOutdated !== undefined) {
+    return isOutdated;
+  }
+  // If `checkChildCompilerCache` has never been called for the given
+  // `mainCompilation` and `childCompiler` combination call it:
+  isOutdated = isChildCompilerCacheOutdated(mainCompilation, childCompiler);
+  hasOutdatedChildCompilerDependenciesMap.set(childCompiler, isOutdated);
+  return isOutdated;
+}
 
 /**
- * Returns the child compiler name e.g. 'html-webpack-plugin for "index.html"'
+ * Returns `true` if the file dependencies of the given childCompiler are outdated.
+ *
+ * @param {WebpackCompilation} mainCompilation
+ * @param {HtmlWebpackChildCompiler} childCompiler
+ * @returns {boolean}
  */
-function getCompilerName (context, filename) {
-  const absolutePath = path.resolve(context, filename);
-  const relativePath = path.relative(context, absolutePath);
-  return 'html-webpack-plugin for "' + (absolutePath.length < relativePath.length ? absolutePath : relativePath) + '"';
+function isChildCompilerCacheOutdated (mainCompilation, childCompiler) {
+  // If the compilation was never run there is no invalid cache
+  if (!childCompiler.compilationStartedTimestamp) {
+    return false;
+  }
+  // Check if any dependent file was changed after the last compilation
+  const fileTimestamps = mainCompilation.fileTimestamps;
+  const isCacheOutOfDate = childCompiler.fileDependencies.some((fileDependency) => {
+    const timestamp = fileTimestamps.get(fileDependency);
+    // If the timestamp is not known the file is new
+    // If the timestamp is larger then the file has changed
+    // Otherwise the file is still the same
+    return !timestamp || timestamp > childCompiler.compilationStartedTimestamp;
+  });
+  return isCacheOutOfDate;
 }
+
+module.exports = {
+  addTemplateToCompiler,
+  compileTemplate,
+  hasOutDatedTemplateCache,
+  clearCache,
+  getFileDependencies
+};

package/lib/errors.js

@@ -1,8 +1,9 @@
+// @ts-nocheck
 'use strict';
 const PrettyError = require('pretty-error');
 const prettyError = new PrettyError();
 prettyError.withoutColors();
-prettyError.skipPackage(['html-plugin-evaluation']);
+prettyError.skipPackage('html-plugin-evaluation');
 prettyError.skipNodeFiles();
 prettyError.skip(function (traceLine) {
   return traceLine.path === 'html-plugin-evaluation';