DeprecationWarning: Tapable.plugin is deprecated.

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.

Answer 1

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.

Answer 2

There are several plugins that could be causing this warning on Webpack 4 because they are still using the old plugin API, they need to be upgraded to the latest version. 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:

yarn upgrade friendly-errors-webpack-plugin

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

This worked for me to quickly find the issue, I hope it helps others.

Answer 3

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 

Answer 4

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.

Answer 5

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