Create-react-app: UnhandledPromiseRejectionWarning: TypeError: this.htmlWebpackPlugin.getHooks is not a function

[fabioelia]

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

[raptoria]

I’m getting this same issue, running Node V 8.12.0 on Windows 7 for React scripts start command:

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

DeprecationWarning: Pass resolveContdxt instead and use createInnerContext

DeprecationWarning: Resolver: the callback argument was splitted into resolveContext and callback

DeprecationWarning: Resolver#doResolve: the type arguments (string) is now a hook argument (Hook) pass a reference to the hook instead

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

[fabioelia]

Thanks for the feedback @kylealwyn but it didn't seem to work. Still seeing the same issue:

(node:34967) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:34967) UnhandledPromiseRejectionWarning: TypeError: this.htmlWebpackPlugin.getHooks is not a function
    at compiler.hooks.compilation.tap.compilation (/xxxx/packages/documentation/node_modules/react-dev-utils/InterpolateHtmlPlugin.js:28:10)
    at SyncHook.eval [as call] (eval at create (/xxxx/packages/documentation/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/xxxx/packages/documentation/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/xxxx/packages/documentation/node_modules/webpack/lib/Compiler.js:498:26)
    at hooks.beforeCompile.callAsync.err (/xxxx/packages/documentation/node_modules/webpack/lib/Compiler.js:534:29)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/xxxx/packages/documentation/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/xxxx/packages/documentation/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/xxxx/packages/documentation/node_modules/webpack/lib/Compiler.js:529:28)
    at compiler.hooks.watchRun.callAsync.err (/xxxx/packages/documentation/node_modules/webpack/lib/Watching.js:77:18)
    at _err0 (eval at create (/xxxx/packages/documentation/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:20:1)
    at watchRun (/xxxx/packages/documentation/node_modules/fork-ts-checker-webpack-plugin/lib/index.js:140:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/xxxx/packages/documentation/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/xxxx/packages/documentation/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._go (/xxxx/packages/documentation/node_modules/webpack/lib/Watching.js:40:32)
    at Watching.compiler.readRecords.err (/xxxx/packages/documentation/node_modules/webpack/lib/Watching.js:32:9)
    at Compiler.readRecords (/xxxx/packages/documentation/node_modules/webpack/lib/Compiler.js:396:11)
(node:34967) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:34967) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[fabioelia]

@kylealwyn thanks for the lead, was able to track the issue down to html-webpack-plugin and had to pin it down to webpack-4"

[kylealwyn]

Awesome!

[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 :)

[strongui]

@RichieRock I'm now getting the error URIError failed to decode param '%PUBLICURL%. That's progress I guess. Any ideas why?

[RichieRock]

@strongui my best guess is that you have missed the PUBLIC_URL from the InterpolateHtmlPlugin as a second parameter. I have this in my config:

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

I'll edit my comment so it's more clear :)

[strongui]

@RichieRock Yep that was it. Thanks!