UnhandledPromiseRejectionWarning: TypeError: this.htmlWebpackPlugin.getHooks is not a function

Is this a bug report? (Yes)

Currently hitting an issue with our environment using webpack 4 and the latest 6.0.5 package from create-react-app. Currently in the process we utilize react-dev-utils/InterpolateHtmlPlugin which has a method getHooks which seems to be leading to the following error:

(node:25316) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:25316) UnhandledPromiseRejectionWarning: TypeError: this.htmlWebpackPlugin.getHooks is not a function

From what I can tell a commit 28 days ago may have re-introduced this old syntax, as https://github.com/facebook/create-react-app/blame/d55525651fb57e6ca6fb79c1d5c61601c129cbbd/packages/react-dev-utils/InterpolateHtmlPlugin.js this prior version seemed to use the new hook api

I’m not familiar enough with the codebase to suggest a fix, if just that file may have regressed or others.

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to Reproduce

Coming Soon

Expected Behavior

Actual Behavior

Reproducible Demo

Coming Soon

[RichieRock]

I had the same issue. In case there’s someone else trying to upgrade to webpack 4 on a a react app, here’s some tips I had to do to make it working:

run npm install <plugin-name>@latest --save with all webpack plugins that you have run npm i html-webpack-plugin@next --saveto get the beta version of html-webpack-plugin (this works with webpack 4) Upgrade react-dev-utils and react if necessary Make sure new InterpolateHtmlPlugin(... is AFTER new HtmlWebpackPlugin({... in the plugins section of webpack.config file. Add the HtmlWebpackPlugin as parameter to InterpolateHtmlPlugin as stated by @kylealwyn and don’t forget the publicUrl in case you’re using it:

new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
  PUBLIC_URL: publicUrl
}),

(Extra) Also since I’m using typescript, I had to update @types/webpack.

I hope this helps someone else 😃

[kylealwyn]

https://github.com/facebook/create-react-app/pull/5031/files#diff-ea4f448ea185319313285123e7f97294R48

It looks like you now need to pass theHtmlWebpackPlugin object when adding the InterpolateHtmlPlugin

This fixed the issue for me.