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

[devthejo]

Description

Webpack 4 support: compilation.mainTemplate.applyPluginsWaterfall is not a function

Error Message & Stack Trace

compilation.mainTemplate.applyPluginsWaterfall is not a function
    at /var/www/myproject/node_modules/html-webpack-plugin/lib/compiler.js:81:

[jbruni]

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.

[gaterking]

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

[stevenfitzpatrick]

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",

[damianobarbati]

@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

[damianobarbati]

@jbruni would you share your working starter kit for anyone having this at the moment?

[jbruni]

@damianobarbati - There is nothing special to share... I've only used the fork in place of the regular plugin. I was not using chunks, the project had few dependencies... But I discontinued it. It was kind of a test/play little exercise.

[damianobarbati]

@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? 🤨

[iliatcymbal]

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

[TomasHubelbauer]

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

[iliatcymbal]

@TomasHubelbauer, that works for me, thank you! How did you get this?)

[francoisromain]

@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

[kutsan]

@francoisromain Maybe rm -rf node_modules/ && npm install?

[francoisromain]

@kutsan I did that already…
Maybe is it related to this: https://github.com/webpack-contrib/html-webpack-plugin/issues/13 ?

[francoisromain]

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

[virkse]

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

yarn can fix the dependencies according to packages.

[stevenfitzpatrick]

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

[Jarch09]

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

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

[Ghostdar]

@damianobarbati
i just meet the same error when i use webpack4 , do you resolve this case ?
```
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
  ````

[giacomocerquone]

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

[Silvia813]

i met 2 problems and i resolved them by @stevenfitzpatrick
but then i met this problem:

ERROR in ./main.js
Module build failed: TypeError: Cannot read property 'babel' of undefined
    at Object.module.exports (/Users/shenxin/playground/webpack2/node_modules/babel-loader/lib/index.js:103:36)
 @ multi ../node_modules/webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./main.js webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server

I fixed the problem by installing the latest version of my packages.

[benoitkoenig]

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

[zhengkai2001]

npm install webpack-contrib/html-webpack-plugin --save-dev will do the trick if you happen to use npm not yarn like me

[am]

@benoitkoenig same happen to me, other dependencies may break your build with the same error:

[spawn] stderr: (node:35845) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
[spawn] stderr: (node:35845) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
[spawn] stderr: /project/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
    at /project/node_modules/html-webpack-plugin/lib/compiler.js:81:51

Even after having updated html-webpack-plugin to the latest version a tapable resolved to 1.0.0

[jantimon]

@am your version is outdated - please take a look at the current source which includes an integration for the new webpack 4 asset path generation:
https://github.com/jantimon/html-webpack-plugin/blob/e6e84648fb3333ec072e06a9d3b1fcc7bee85440/lib/compiler.js#L78-L89

[am]

@jantimon thanks for the heads-up. Even after update to the latest version 3.0.6 I still had the same error. Read this thread and the solution that worked for me was to do the same as benoitkoenig proposed, after updating those dependencies the issue is gone. Not sure how it relates, but thought that was worth mention here.

[kumaresan-subramani]

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

i used this command but its not working because my web-pack version is 4.4.1

give some idea about this issue

[giacomocerquone]

I used to do: npm install webpack-contrib/html-webpack-plugin --save-dev

but now I get:

npm ERR! Error while executing:
npm ERR! /usr/bin/git ls-remote -h -t ssh://[email protected]/webpack-contrib/html-webpack-plugin.git
npm ERR! 
npm ERR! Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.
npm ERR! 
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR! 
npm ERR! exited with error code: 128

What happened to the repo? This is driving me nuts

[jantimon]

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

[giacomocerquone]

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

[jantimon]

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

[yan5]

Somehow the npm install html-webpack-plugin --save-dev is not picking the latest version.
Use npm install [email protected] --save-dev

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.