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

Question

I tried to run the Vuetify VueJS Cordova example but got this error after npm run dev

node build/dev-server.js

Starting dev server... (node:1024) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead (node:1024) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

How to fix it? I already update all NPM packages, didn't help.

Maikel Ruiz · Answer 1 · 2020-07-20T23:06:45.583

There are several plugins that could be causing this warning on Webpack 4 or newer, because they are still using the old plugin API, they need to be upgraded. To find which plugin(s) is causing the warning, put this on the top of your webpack config file:

process.traceDeprecation = true

You will see a detailed stack trace like this:

 (node:10213) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
   at FriendlyErrorsWebpackPlugin.apply (./node_modules/friendly-errors-webpack-plugin/src/friendly-errors-plugin.js:39:14)
   at webpack (./node_modules/webpack/lib/webpack.js:37:12)
   at processOptions (./node_modules/webpack-cli/bin/webpack.js:436:16)
   at <anonymous>
   at process._tickCallback (internal/process/next_tick.js:160:7)
   at Function.Module.runMain (module.js:703:11)
   at startup (bootstrap_node.js:193:16)
   at bootstrap_node.js:617:3

In this case it means friendly-errors-webpack-plugin is the responsible for the warning.

Alternatively you can run your node process adding the --trace-deprecation flag.

After you find which plugin is causing the warning upgrade it using your package manger, and the warning should go away:

npm update friendly-errors-webpack-plugin

If you wan't to entirely suppress deprecation warnings like this one (NOT RECOMMENDED), use process.noDeprecation = true

This is very useful for debugging! – Hongbo Miao Jul 20 '20 at 19:43 — Hongbo Miao, Jul 20 '20 at 19:43

score 24 · Accepted Answer · answered Apr 22 '18 at 22:44

The deprecation message:

DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

Is just a warning:

Here is a quick summary for everyone encountering this message.

What is this message?

webpack 4 is using a new plugin system and deprecates the previous APIs. There are 2 new warnings:
DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
These are warnings. They are outputted to the console to warn our users that they are using an outdated API and should migrate to the newest.

How bad are these warnings?

They are only a textual information, not errors. If you see a DeprecationWarning you can ignore it until you have to update to the next major version of webpack.

So there's nothing you have or should do about it.

Other than that, I trust you are receiving an error like:

/tmp/my-project> npm run dev

> my-project2@1.0.0 dev /tmp/my-project/my-project
> node build/dev-server.js

> Starting dev server...
(node:29408) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:29408) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
/tmp/my-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 /tmp/my-project/node_modules/html-webpack-plugin/lib/compiler.js:81:51
    at compile (/tmp/my-project/node_modules/webpack/lib/Compiler.js:242:11)
    at hooks.afterCompile.callAsync.err (/tmp/my-project/node_modules/webpack/lib/Compiler.js:487:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/tmp/my-project/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/tmp/my-project/node_modules/tapable/lib/Hook.js:35:21)
    at compilation.seal.err (/tmp/my-project/node_modules/webpack/lib/Compiler.js:484:30)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/tmp/my-project/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/tmp/my-project/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeAssets.callAsync.err (/tmp/my-project/node_modules/webpack/lib/Compilation.js:966:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/tmp/my-project/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/tmp/my-project/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeChunkAssets.callAsync.err (/tmp/my-project/node_modules/webpack/lib/Compilation.js:957:32)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/tmp/my-project/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/tmp/my-project/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.additionalAssets.callAsync.err (/tmp/my-project/node_modules/webpack/lib/Compilation.js:952:36)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/tmp/my-project/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-project@1.0.0 dev: `node build/dev-server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-project@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

You should update your html-webpack-plugin to the latest version:

npm install --save-dev html-webpack-plugin@3

And the error should go away.

Note: I have created a PR in their repo to fix this as well: https://github.com/vuetifyjs/cordova/pull/18 — acdcjunior, Apr 22 '18 at 22:59
Also this error comes up after `npm run android` : **throw new Error( ^ Error: Path variable [contenthash] not implemented in this context: css/[name].[contenthash].css** I updated all packages incl. Webpack and "mini-css-extract-plugin" but it doesn't fixed the error. Any ideas? — Tom, Apr 23 '18 at 12:55
I am unable to test with android, but there has been some developments: The PR has been accepted and it seems the other problems (if not corrected already) have workarounds -- see discussion https://github.com/vuetifyjs/cordova/issues/19. — acdcjunior, Apr 27 '18 at 16:11
Thank you, I got it to work now. Is it possible to compile the Android app .apk straight from the console or do I need to go an extra step with Android Studio? — Tom, Apr 27 '18 at 16:34
Honestly, I haven't developed for android (I know npm, though). But it seems you would use the `cordova` client, such as `cordova build` to get the `apk`. — acdcjunior, Apr 27 '18 at 17:43
Unfortunately I still get the error after `npm install --save-dev html-webpack-plugin@4` — Ryan, Sep 24 '20 at 00:07
I have installed and tried with both the versions of WebPack Plugin 1>npm install --save-dev html-webpack-plugin@3 , 2>npm install --save-dev html-webpack-plugin@4 . Still getting Deprecation Message. — thinkerBOB, Nov 04 '22 at 11:28

Nidhi · Answer 3 · 2018-10-23T08:10:30.517

5

I was facing the same issue. Resolved using this command:-

npm install --save-dev extract-text-webpack-plugin@next

NPM 6.4.1
Node 10.9.0
Webpack 4.22.0

edited Oct 23 '18 at 08:10

answered Oct 23 '18 at 05:22

Nidhi

111
2
7

1

Unfortunately I still get the error after `npm install --save-dev extract-text-webpack-plugin@next` – Ryan Sep 24 '20 at 00:07

score 1 · Answer 4 · answered Feb 20 '19 at 20:10

1

I ran into this issue when I attempted to run webpack-dev-server twice, one running in one terminal, another I tried to run in a different terminal. Running only one resolved the issue.

answered Feb 20 '19 at 20:10

hsintuit

11
1

score 1 · Answer 5 · answered Jul 18 '19 at 07:19

1

In my case the deprecation notice was raised by the webpack-md5-hash package.

answered Jul 18 '19 at 07:19

codejockie

9,020
4
40
46

score 0 · Answer 6 · answered Jul 11 '18 at 12:23

0

In my case the problem was in webpack-cleanup-plugin. I have fixed it after replacing this plugin with clean-self-webpack-plugin.

answered Jul 11 '18 at 12:23

Dima Dorogonov

2,297
1
20
23

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

6 Answers6

What is this message?

How bad are these warnings?

Linked