html-webpack-plugin-before-html-processing error while working with webpack 4

[duzy]

Prerequisites

• WebPack 4.0.1

Description

Not working with webpack ^4.0.1

Error Message & Stack Trace

...
Creating an optimized production build...
Failed to compile.

Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
...

Config

Copy the relevant section from webpack.config.js:

    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.10",

Environment

Ubuntu

[jantimon]

Webpack 4 changed the way how plugins communicate.
The plugin which is using the "html-webpack-plugin-before-html-processing" has to be upgraded to webpack 4.x

[TomFoyster]

I'm having the same problem - and it looks like you're saying it isn't this plugin that's actually the problem? Any idea how to find out what the offending plugin is?

[kylealwyn]

@duzy @TomFoyster if you started with create-react-app, looks like https://github.com/facebook/create-react-app/tree/next/packages/react-dev-utils#new-interpolatehtmlpluginreplacements-keystring-string is potentially the culprit

here's fix in CRA Webpack 4 PR: https://github.com/facebook/create-react-app/pull/4077/files#diff-3b55301108483c3bb5289672dd9caa59

[TomFoyster]

@kylealwyn You're exactly right. We're now waiting for CRA to update to support WP4, and then we're going to have to recreate our App, which should be fun.

We've some really good gains with WP4 though in one of our component libraries though, so it'll be worth it.

Thanks for your help :)

[tiarebalbi]

Following the PR created, Would the problem below be covered in this PR?

Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'.

[RiCoTeRoX]

Can some one please, view this PR? @sokra @pducks32

[b0o]

If you ejected from create-react-app and are getting this error upon yarn build, make sure the InterpolateHtmlPlugin line comes _after_ the HtmlWebpackPlugin line in your webpack config file(s):

module.exports = {
  //...
  plugins: [
    new HtmlWebpackPlugin({
      // ...
    }),
    new InterpolateHtmlPlugin(env.raw),
    //..
  ]
}

[MattyBalaam]

If the order is switched around are the environment variables still used by HtmlWebpackPlugin?

[dkocich]

@MattyBalaam not in my case...