html-webpack-plugin: Webpack 4: compilation.mainTemplate.applyPluginsWaterfall is not a function

Actually I got a fix for the SyncWaterfallHook error, this seems to be due to different webpack plugin using different versions of Tapable.

But if you install the latest Tapable yourself in your package.json like this

"tapable": "1.0.0-beta.5",

Everything seems to work…

Right now this is my package.json setup to get Webpack4 up and running, I hope it helps

    "html-webpack-plugin": "webpack-contrib/html-webpack-plugin",
    "tapable": "1.0.0-beta.5",
    "webpack": "^4.0.0-beta.1",
    "webpack-cli": "^2.0.6",
    "webpack-dev-server": "^3.0.0-beta.1",

@iliatcymbal Use yarn add webpack-contrib/html-webpack-plugin -D, a fork maintained by WebPack until the maintaner of this plugin is able to resolve this, and you’ll be set. I did it this morning and it works flawlessly.

html-webpack-plugin 3.0.0 seems to be out…and everything just works : )

Still getting a deprecation warning with html-webpack-plugin 3.0.0+

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

There is a PR for Webpack 4 support: https://github.com/jantimon/html-webpack-plugin/pull/823

Here is the source branch: https://github.com/Graham42/html-webpack-plugin/tree/feat/webpack-4

The author warns about chunk-related issues, but in my starter Webpack 4 beta setup, it is working.

Hey, what the status, any news? new HtmlWebpackPlugin() still doesn’t work for me
I’m suing config

   "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^4.0.0",
    "webpack-cli": "^2.0.9"
  }

And got

/node_modules/html-webpack-plugin/lib/compiler.js:81
        var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
                                                  ^

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

@jbruni I get an error from the branch. compilation.hooks.htmlWebpackPluginAlterChunks = new SyncWaterfallHook(['chunks', 'objectWithPluginRef']); TypeError: SyncWaterfallHook is not a constructor

@giacomocerquone I am very sorry but this was fixed 1 month ago.
All unit tests and examples work well with webpack 4 and html-webpack-plugin 3 https://travis-ci.org/jantimon/html-webpack-plugin/builds/361541288
Please make sure that you updated all of your dependencies.
If updating does not help please open a new issue with the smallest possible webpack config so we can reproduce and fix the issue.

Solution is to run yarn add webpack-contrib/html-webpack-plugin -D

yarn can fix the dependencies according to packages.

Somehow the npm install html-webpack-plugin --save-dev is not picking the latest version. Use npm install html-webpack-plugin@3.2.0 --save-dev

@Silvia813 had the same issue, fixed it by installing the latest versions of my babel-loaders

@jantimon I tried that, but it doesn’t work anymore, it gives me compilation.mainTemplate.applyPluginsWaterfall is not a function now

It does not exist anymore please use npm install html-webpack-plugin --save-dev

Still getting this error too in a react native project with styleguidist. I’m using this configuration for a project of mine: https://github.com/styleguidist/react-styleguidist/tree/master/examples/react-native

This is the error:

(node:18009) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:18009) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

This https://github.com/webpack-contrib/html-webpack-plugin/commit/6319451c00494ec32fea9176bfdcb7528185ab35 fixed it for me. Thanks.

@TomasHubelbauer I updated to webpack-contrib/html-webpack-contrib but still have an error:

compilation.hooks.htmlWebpackPluginAlterChunks = new SyncWaterfallHook(['chunks', 'objectWithPluginRef']);
                                                       ^

TypeError: SyncWaterfallHook is not a constructor
    at /node_modules/html-webpack-plugin/index.js:50:56

Any idea why? Thank you

@jbruni sorry for the noise, the error thrown by html-plugin was related to babel. It’s very weird anyway: I wrote a simple plugin on my own to put the assets into the html and exclude html-webpack-plugin possible errors. It worked flawlessly and the error was instead fired into console at runtime (it’s not fired by webpack): how did it end up into the html file? 🤨

@stevenfitzpatrick is your fix still working for you? I tried but it does not seem to work. Will this be fixed soon in master? I mean, webpack@4 compatibility.

I see a long list like:

ERROR in   TypeError: __webpack_require__(...) is not a function
  
  - es6.regexp.replace.js?:2 eval
    [.]/[core-js]/modules/es6.regexp.replace.js?:2:90
  
  - index.html:339 Object../node_modules/core-js/modules/es6.regexp.replace.js
    /Users/damz/Desktop/yarsk/app/index.html:339:1

My index.html is 12 lines long, so I don’t know what index.html:339 is. Removing html-webpack-plugin works fine, but I have no hijacked html xD