html-webpack-plugin: Webpack 5: The 'compilation' argument must be an instance of Compilation

Expected behaviour

Should correctly update the html file with script tags.

Current behaviour

Trying to update my project to webpack 5 beta 16.

Getting an error running webpack-dev-server. When I remove the html-webpack-plugin from my config it compiles fine, but keep getting the following error:

  TypeError: The 'compilation' argument must be an instance of Compilation
  
  - JavascriptModulesPlugin.js:116 Function.getCompilationHooks
    [irisroot]/[html-webpack-plugin]/[webpack]/lib/javascript/JavascriptModulesPlugin.js:116:10
  
  - NodeTemplatePlugin.js:34 compiler.hooks.thisCompilation.tap.compilation
    [irisroot]/[html-webpack-plugin]/[webpack]/lib/node/NodeTemplatePlugin.js:34:42
  
  
  - Hook.js:14 Hook.CALL_DELEGATE [as _call]
    [iris]/[tapable]/lib/Hook.js:14:14
  
  - Compiler.js:864 Compiler.newCompilation
    [iris]/[webpack]/lib/Compiler.js:864:30
  
  - Compiler.js:905 hooks.beforeCompile.callAsync.err
    [iris]/[webpack]/lib/Compiler.js:905:29
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [iris]/[tapable]/lib/Hook.js:18:14
  
  - Compiler.js:900 Compiler.compile
    [iris]/[webpack]/lib/Compiler.js:900:28
  
  - Compiler.js:445 Compiler.runAsChild
    [iris]/[webpack]/lib/Compiler.js:445:8
  
  - child-compiler.js:110 compilationPromise.Promise
    [irisroot]/[html-webpack-plugin]/lib/child-compiler.js:110:21
  
  - new Promise
  
  - child-compiler.js:109 HtmlWebpackChildCompiler.compileTemplates
    [irisroot]/[html-webpack-plugin]/lib/child-compiler.js:109:31
  
  - cached-child-compiler.js:344 PersistentChildCompilerSingletonPlugin.compileEntries
    [irisroot]/[html-webpack-plugin]/lib/cached-child-compiler.js:344:21
  
  - cached-child-compiler.js:211 isCacheValidPromise.then
    [irisroot]/[html-webpack-plugin]/lib/cached-child-compiler.js:211:47
  
  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7
  
  - loader.js:834 Function.Module.runMain
    internal/modules/cjs/loader.js:834:11
  
  - node.js:283 startup
    internal/bootstrap/node.js:283:19
  
  - node.js:622 bootstrapNodeJSCore
    internal/bootstrap/node.js:622:3
  
Html Webpack Plugin:

Environment

Node.js v10.16.3 darwin 18.7.0 npm 6.9.0 yarn 1.22.0 html-webpack-plugin@4.3.0 extraneous webpack@5.0.0-beta.16

Config

    new HtmlWebpackPlugin({
      template: '../index.html',
    }),

It seems to just have a problem with this project. I tried to get a minimal repo going, except it works fine there. Not sure what’s going on within this project, but I’ve been trying to remove other things to see if it’s something else without any luck.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 10
Comments: 34 (9 by maintainers)

Most upvoted comments

what’s progress of this issue ? i faced the same issue of “webpack”: “^5.0.0-beta.30”,

tianyingchun on Sep 12, 2020

@ebuchmann I had a similar error and it was because of having “webpack” installed in 2 places (monorepo), in such case it trigger this error (just having 1 works). Therefore, at least in my case, it is related to the node resolution.

artola on Jun 2, 2020

npx webpack

Misstear on Oct 26, 2020

Can confirm the workspaces issue. I’m using yarn workspaces, No dependencies are hoisted ("nohoist": ["**"]), and have the following structure.

/
- config/
  - node_modules/
    - webpack/
    - webpack-cli/
    - webpack-dev-server/
    - html-webpack-plugin/
  - webpack.config.js
  - package.json
    - dependency: html-webpack-plugin
- packages/
  - webapp/
    - node_modules/
      - webpack/
      - webpack-cli/
      - webpack-dev-server/
      - html-webpack-plugin/
    - package.json
      - devDependency: config
package.json
- { "private": true, "workspaces": { "nohoist": [ "**" ], "packages": [ "config", "packages/*" ] } }

The packages/webapp package depends on the config package in the same workspace. The config package depends on the html-webpack-plugin, and also contains a shared webpack.config.js file. Running webpack serve -c node_modules/config/webpack.config.js in packages/webapp/ resolves webpack-cli (and dependencies) to packages/webapp/node_modules/. But the shared config/webpack.config.js resolves html-webpack-plugin (and dependencies) to config/node_modules/. This results in two versions of “something” being resolved.

I have a work around that cause the shared webpack.config.js to resolve plugins in the consuming (webapp) project instead of the shared config project.

Originally, the shared webpack.config.js has this require at the top.

const HtmlWebpackPlugin = require('html-webpack-plugin');

Changing it to the following causes html-webpack-plugin to resolve to a single version in packages/webapp/node_modules/, which fixes the problem.

const HtmlWebpackPlugin = require(require.resolve('html-webpack-plugin', { paths: [process.cwd()] }));

Edit: This might be a slightly more portable solution given that relative to the main module is probably where you want modules to be resolved.

const _require = id => require(require.resolve(id, { paths: [require.main.path] }));
const HtmlWebpackPlugin = _require('html-webpack-plugin');

Shakeskeyboarde on Oct 22, 2020

I believe this might happen if multiple different webpack versions are installed - if webpack uses instanceOf to verify the passed values it might fail because compilation was constructed with a foreign Compilation constructor

jantimon on Oct 18, 2020

Probably fixed in html-webpack-plugin@5.0.0-alpha.9 please repoen this issue if it’s not fixed.

jantimon on Nov 1, 2020