Webpack 5: The 'compilation' argument must be an instance of Compilation #1451

ebuchmann · 2020-05-29T21:36:35Z

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.

The text was updated successfully, but these errors were encountered:

artola · 2020-06-02T19:12:15Z

@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.

biggu0 · 2020-07-30T12:11:34Z

@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.

thx a lot !

tianyingchun · 2020-09-12T02:08:29Z

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

chunlai996 · 2020-10-14T04:01:01Z

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

upgrade webpack to 5.1.0

tianyingchun · 2020-10-17T11:03:04Z

@chunlai996 i upgrade to webpack@5.1.3 & html-webpack-plugin@next (alpha.5) it also throw this issue.

TypeError: The 'compilation' argument must be an instance of Compilation\n

Thebarda · 2020-10-17T11:24:54Z

I don't have this kind of error using webpack@5.1.3, webpack-cli@4.0.0 and html-webpack-plugin@5.0.0-alpha.5.
Here is my config

new HtmlWebpackPlugin({
  alwaysWriteToDisk: true,
  template: './www/public/index.html',
  filename: 'index.html',
}),
new HtmlWebpackHarddiskPlugin({
  outputPath: path.resolve(`${__dirname}/www`),
}),

@tianyingchun Do you have another pluygin inside your configuration that might occur this error ?

jantimon · 2020-10-17T21:24:23Z

I have also troubles to reproduce this issue

tianyingchun · 2020-10-18T01:39:07Z

@jantimon @Thebarda i have just remove all plugins, just remain

new HtmlWebpackPlugin({
      template: 'a/b/index.html',
      filename: join(pkgDir.sync(__dirname) || '', 'templates/index-prod.html'),
    }),

it still throw this error, if remove webpack-html-plugin the build works fine. i don't know the reason, i prepare the simple repo to reproduce this issue later.

tianyingchun · 2020-10-18T01:40:48Z

BTW i don't use webpack-cli i use webpack build api

//  multi compiler or single compiler.
  webpack(multiConfiguration[0], (err, stats) => {
if (err) {
        // Handle errors here
        return reject(err);
      }
      if (err) {
        return reject(err);
      }
      const { errors, warnings } = stats?.toJson();
      if (errors.length) {
        return reject(errors);
      }
      if (warnings.length) {
        return reject(warnings);
      }
      resolve({});
}

jantimon · 2020-10-18T04:19:37Z

can you add a console log where the error occurs and output compilation?

tianyingchun · 2020-10-18T09:17:38Z

@jantimon i try to start new repo with simplify webpack configurations to reproduce issue, but surprised it work fine can build success without errors, does not report me a error, the repo is https://github.com/tianyingchun/webpack5

Maybe i need to some more time to investigate for this, be cause my real project is more complex than this demo repo.

tianyingchun · 2020-10-18T13:14:33Z

@jantimon i found how to reproduce this issue, if i put create Html-webpack-plugin instance into another npm module e.g. please consider below structures.

in repo webpack-utils expose method createHtmlWebpackPlugin()

 export const createHtmlWebpackPlugin = () =>{
   const htmlPlugins: [];
   htmlPlugins.push(new HtmlWebpackPlugin({});
   return htmlPlugin;
}

in repo myProjects
import {createHtmlWebpackPlugin} from 'webpack-utils';
const webpack = {
mode:'production',
......
plugins: createHtmlWebpackPlugin(),
....
};

and then run the webpack build it will throw errors.

if i copy all codes createHtmlWebpackPlugin() from webpack-utils into myProjects directly, it works fine.

Why ? Or is there a wrong while in usage of plugin of webpack?

radiogron · 2020-10-18T16:47:08Z

Got same problem. But with another config. Fir project I'm using gulp with webpack-stream and keep config into one file (gulpfile). There are only Vue loaders, styles and nothing else. Problem git during updating to new Vue 3, Vuex and also upgraded webpack from 4 to 5.

Fixed by downgrading webpack to 4th.

jantimon · 2020-10-18T16:59:18Z

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

tianyingchun · 2020-10-19T00:28:40Z

@jantimon no the two modules have the same version of wbpack & html-webpack-plugin, even if i use peerDependency for utils module it also throw this error.

jantimon · 2020-10-19T07:11:37Z

Can you please try to find the reason of this problem using node --inspect-brk ./node_modules/.bin/webpack and debugger statements?

tianyingchun · 2020-10-19T08:04:38Z

:) i totally migrate my code into single repo now, keep html-webpack-plugin with webpack within the same npm module it works fine :) when I have time, i will try to debug it, MAYBE this issue is related for learna package with paths definitions of tsconfig.json.

spamshaker · 2020-10-19T17:43:22Z

Ok I found the root cause of my issue
@jantimon is right

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

the situation is that I have the structure like

root
| + node_modules/webpack
| + example/node_modules/webpack

and while execution happen in example/ directory, then it resolves them to both locations. I am not digging into it deeper but the fastest resolution is to link the root library in nested project
webpack: "file:../node_modules/webpack

for lerna project running bootstrap with --hoist should deal with it as well as for yarn workspaces

Shakeskeyboarde · 2020-10-20T04:32:27Z

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');

tw19920521 · 2020-10-20T07:09:32Z

solved? I have the same problem

tw19920521 · 2020-10-20T07:10:13Z

ERROR in TypeError: The 'compilation' argument must be an instance of Compilation

JavascriptModulesPlugin.js:118 getCompilationHooks
[webpack_demo]/[webpack]/lib/javascript/JavascriptModulesPlugin.js:118:10
CommonJsChunkFormatPlugin.js:30 compiler.hooks.thisCompilation.tap.compilation
[webpack_demo]/[webpack]/lib/javascript/CommonJsChunkFormatPlugin.js:30:19
Hook.js:14 Hook.CALL_DELEGATE [as _call]
[npm]/[webpack]/[tapable]/lib/Hook.js:14:14
Compiler.js:915 Compiler.newCompilation
[npm]/[webpack]/lib/Compiler.js:915:30
Compiler.js:957 hooks.beforeCompile.callAsync.err
[npm]/[webpack]/lib/Compiler.js:957:29
Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[npm]/[webpack]/[tapable]/lib/Hook.js:18:14
Compiler.js:952 Compiler.compile
[npm]/[webpack]/lib/Compiler.js:952:28
Compiler.js:477 Compiler.runAsChild
[npm]/[webpack]/lib/Compiler.js:477:8

webpack 5.0.0 compiled with 1 error in 1412 ms

jantimon · 2020-10-22T08:20:51Z

I guess there is no way that we could solve this on html-webpack-plugin side..

park1992 · 2020-10-24T15:07:20Z

Download the 4 version of webpack try, 5 version changed a lot of content

Misstear · 2020-10-26T13:14:37Z

npx webpack

zx870283980 · 2020-10-27T03:16:54Z

还是有这样的问题，需要怎么解决

jantimon · 2020-10-27T07:55:30Z

This is the new code in webpack 5 which is causing the problem:

https://github.com/webpack/webpack/blob/92cb047a9cb7eb71823cfbf4a9c4d6367bbb5166/lib/javascript/JavascriptModulesPlugin.js#L112-L122

compilation instanceof Compilation returns false if multiple webpack versions are installed (e.g. inside a mono repository)

please move this issue to https://github.com/webpack/webpack/issues

jantimon · 2020-11-01T12:15:00Z

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

syntax-punk · 2020-11-02T14:19:55Z

Hi, I faced the same issue and tried almost every possible permutation of the configuration settings explained here. My dev dependencies are:

    "html-webpack-plugin": "^4.5.0",
    "webpack": "^5.3.1",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"

And the fun part is that this was working on one Windows machined and giving the The 'compilation' argument must be an instance of Compilation error on other.

The solution was as simple as running the terminal as administrator for running the npm commands (npm i, npm start).

I hope this will help someone to save some time :)

jantimon · 2020-11-02T14:32:07Z

@theVoogie the fix is not part of "html-webpack-plugin": "^4.5.0", can you please try 5.0.0-alpha.9 instead?

Night-Day-X · 2020-11-05T04:31:40Z

It can be fixed using @5.0.0-alpha.9, but the <script> was introduced in the header

jantimon · 2020-11-05T08:15:37Z

@Night-Day-X yes that's an performance improvement - you can change that back with the scriptLoading option

Si3rr4wow · 2020-11-06T14:32:40Z

I can confirm html-webpack-plugin@5.0.0-alpha.9 fixed this for me (monorepo with multiple webpacks at different versions, on Windows). Thanks for your work on this plugin jantimon :)

ghost · 2020-11-25T01:08:11Z

Got this issue too，with vue-loader@15.9.5, avoided this by setting

"vue-loader": "^14.0.0",

(maybe the last stable version) in webpack.config.js.

mudin · 2020-12-03T08:28:15Z

This issue is not related to html-webpack-plugin. It is happening even I don't use it

chippers mentioned this issue Oct 13, 2020

v2 chippers/html-webpack-inline-runtime-plugin#7

Open

5 tasks

Shakeskeyboarde mentioned this issue Oct 21, 2020

ERROR in TypeError: The 'compilation' argument must be an instance of Compilation #1535

Closed

jantimon closed this as completed Oct 27, 2020

dsozzi mentioned this issue Nov 12, 2020

TypeError: The 'compilation' argument must be an instance of Compilation module-federation/module-federation-examples#514

Closed

pocka mentioned this issue Nov 26, 2020

TypeError: The 'compilation' argument must be an instance of Compilation storybookjs/addon-designs#72

Closed

Repository owner locked as resolved and limited conversation to collaborators Dec 4, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack 5: The 'compilation' argument must be an instance of Compilation #1451

Webpack 5: The 'compilation' argument must be an instance of Compilation #1451

ebuchmann commented May 29, 2020

artola commented Jun 2, 2020

biggu0 commented Jul 30, 2020

tianyingchun commented Sep 12, 2020

chunlai996 commented Oct 14, 2020

tianyingchun commented Oct 17, 2020

Thebarda commented Oct 17, 2020 •

edited

Loading

jantimon commented Oct 17, 2020

tianyingchun commented Oct 18, 2020

tianyingchun commented Oct 18, 2020

jantimon commented Oct 18, 2020

tianyingchun commented Oct 18, 2020

tianyingchun commented Oct 18, 2020

radiogron commented Oct 18, 2020

jantimon commented Oct 18, 2020

tianyingchun commented Oct 19, 2020

jantimon commented Oct 19, 2020

tianyingchun commented Oct 19, 2020

spamshaker commented Oct 19, 2020 •

edited

Loading

Shakeskeyboarde commented Oct 20, 2020 •

edited

Loading

tw19920521 commented Oct 20, 2020

tw19920521 commented Oct 20, 2020

jantimon commented Oct 22, 2020 •

edited

Loading

park1992 commented Oct 24, 2020

Misstear commented Oct 26, 2020

zx870283980 commented Oct 27, 2020

jantimon commented Oct 27, 2020 •

edited

Loading

jantimon commented Nov 1, 2020 •

edited

Loading

syntax-punk commented Nov 2, 2020

jantimon commented Nov 2, 2020

Night-Day-X commented Nov 5, 2020

jantimon commented Nov 5, 2020

Si3rr4wow commented Nov 6, 2020 •

edited

Loading

ghost commented Nov 25, 2020

mudin commented Dec 3, 2020

Webpack 5: The 'compilation' argument must be an instance of Compilation #1451

Webpack 5: The 'compilation' argument must be an instance of Compilation #1451

Comments

ebuchmann commented May 29, 2020

Expected behaviour

Current behaviour

Environment

Config

artola commented Jun 2, 2020

biggu0 commented Jul 30, 2020

tianyingchun commented Sep 12, 2020

chunlai996 commented Oct 14, 2020

tianyingchun commented Oct 17, 2020

Thebarda commented Oct 17, 2020 • edited Loading

jantimon commented Oct 17, 2020

tianyingchun commented Oct 18, 2020

tianyingchun commented Oct 18, 2020

jantimon commented Oct 18, 2020

tianyingchun commented Oct 18, 2020

tianyingchun commented Oct 18, 2020

radiogron commented Oct 18, 2020

jantimon commented Oct 18, 2020

tianyingchun commented Oct 19, 2020

jantimon commented Oct 19, 2020

tianyingchun commented Oct 19, 2020

spamshaker commented Oct 19, 2020 • edited Loading

Shakeskeyboarde commented Oct 20, 2020 • edited Loading

tw19920521 commented Oct 20, 2020

tw19920521 commented Oct 20, 2020

jantimon commented Oct 22, 2020 • edited Loading

park1992 commented Oct 24, 2020

Misstear commented Oct 26, 2020

zx870283980 commented Oct 27, 2020

jantimon commented Oct 27, 2020 • edited Loading

jantimon commented Nov 1, 2020 • edited Loading

syntax-punk commented Nov 2, 2020

jantimon commented Nov 2, 2020

Night-Day-X commented Nov 5, 2020

jantimon commented Nov 5, 2020

Si3rr4wow commented Nov 6, 2020 • edited Loading

ghost commented Nov 25, 2020

mudin commented Dec 3, 2020

Thebarda commented Oct 17, 2020 •

edited

Loading

spamshaker commented Oct 19, 2020 •

edited

Loading

Shakeskeyboarde commented Oct 20, 2020 •

edited

Loading

jantimon commented Oct 22, 2020 •

edited

Loading

jantimon commented Oct 27, 2020 •

edited

Loading

jantimon commented Nov 1, 2020 •

edited

Loading

Si3rr4wow commented Nov 6, 2020 •

edited

Loading