New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack 4: compilation.mainTemplate.applyPluginsWaterfall is not a function #841

Closed
takion opened this Issue Jan 26, 2018 · 32 comments

Comments

Projects
None yet
@takion

takion commented Jan 26, 2018

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:

MichalZalecki added a commit to MichalZalecki/react-boilerplate-lite that referenced this issue Jan 28, 2018

@jbruni

This comment has been minimized.

jbruni commented Jan 28, 2018

There is a PR for Webpack 4 support: #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

This comment has been minimized.

gaterking commented Feb 6, 2018

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

@stevenfitzpatrick

This comment has been minimized.

stevenfitzpatrick commented Feb 17, 2018

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

This comment has been minimized.

damianobarbati commented Feb 21, 2018

@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

This comment has been minimized.

damianobarbati commented Feb 21, 2018

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

@jbruni

This comment has been minimized.

jbruni commented Feb 23, 2018

@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

This comment has been minimized.

damianobarbati commented Feb 23, 2018

@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

This comment has been minimized.

iliatcymbal commented Feb 25, 2018

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

This comment has been minimized.

TomasHubelbauer commented Feb 25, 2018

@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

This comment has been minimized.

iliatcymbal commented Feb 25, 2018

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

@francoisromain

This comment has been minimized.

francoisromain commented Feb 25, 2018

@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

This comment has been minimized.

kutsan commented Feb 25, 2018

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

@francoisromain

This comment has been minimized.

francoisromain commented Feb 25, 2018

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

@francoisromain

This comment has been minimized.

zainfathoni added a commit to zainfathoni/webpack-demo that referenced this issue Feb 27, 2018

@virkse

This comment has been minimized.

virkse commented Feb 28, 2018

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

yarn can fix the dependencies according to packages.

@stevenfitzpatrick

This comment has been minimized.

stevenfitzpatrick commented Feb 28, 2018

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

@jantimon jantimon closed this Mar 1, 2018

@Jarch09

This comment has been minimized.

Jarch09 commented Mar 5, 2018

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

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

boazhoch added a commit to boazhoch/react-styleguidist that referenced this issue Mar 5, 2018

fix(package.json): Updating html-webpack-plugin, fixing compilation.m…
…ainTemplate.applyPluginsWaterfall error realated to incompatible version between webpack 4 and html-webpack-plugin jantimon/html-webpack-plugin#841
@Ghostdar

This comment has been minimized.

Ghostdar commented Mar 14, 2018

@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

This comment has been minimized.

giacomocerquone commented Mar 15, 2018

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

This comment has been minimized.

Silvia813 commented Mar 16, 2018

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

This comment has been minimized.

benoitkoenig commented Mar 16, 2018

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

@zhengkai2001

This comment has been minimized.

zhengkai2001 commented Mar 18, 2018

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

@am

This comment has been minimized.

am commented Mar 20, 2018

@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

This comment has been minimized.

Owner

jantimon commented Mar 20, 2018

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

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]
});

@am

This comment has been minimized.

am commented Mar 20, 2018

@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

This comment has been minimized.

kumaresan-subramani commented Apr 3, 2018

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

This comment has been minimized.

giacomocerquone commented Apr 3, 2018

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://git@github.com/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

This comment has been minimized.

Owner

jantimon commented Apr 3, 2018

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

@giacomocerquone

This comment has been minimized.

giacomocerquone commented Apr 3, 2018

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

@jantimon

This comment has been minimized.

Owner

jantimon commented Apr 3, 2018

@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

This comment has been minimized.

yan5 commented Apr 14, 2018

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

@lock

This comment has been minimized.

lock bot commented May 31, 2018

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.

@lock lock bot locked as resolved and limited conversation to collaborators May 31, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.