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

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

> [email protected] 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! [email protected] dev: `node build/dev-server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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.

Related Posts:

  1. npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
  2. ‘node’ is not recognized as an internal or an external command, operable program or batch file while using phonegap/cordova
  3. NPM Start not starting local server
  4. webpack: Module not found: Error: Can’t resolve (with relative path)
  5. Field ‘browser’ doesn’t contain a valid alias configuration
  6. webpack: Cannot read property ‘match’ of undefined
  7. Cannot find module ‘@babel/core’
  8. Cordova – Current working directory is not a Cordova-based project
  9. Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK – Android
  10. webpack is not recognized as a internal or external command,operable program or batch file
  11. npm WARN deprecated [email protected]: Use uuid module instead
  12. ‘import’ and ‘export’ may only appear at the top level
  13. Webpack – webpack-dev-server: command not found
  14. Webpack command not found
  15. How can I update npm itself?
  16. How to install a previous exact version of a NPM package?
  17. How to solve npm error “npm ERR! code ELIFECYCLE”
  18. npm check and update package if needed
  19. Babel 7 – ReferenceError: regeneratorRuntime is not defined
  20. How do I completely uninstall Node.js, and reinstall from beginning (Mac OS X)
  21. npm ERR cb() never called
  22. I am getting an “Invalid Host header” message when connecting to webpack-dev-server remotely
  23. What does ” yarn build ” command do? Are ” npm build ” and “yarn build” similar commands?
  24. NPM ELIFECYCLE error – using node server.js command
  25. how to render a react component using ReactDOM Render
  26. What is the difference between yarn run and npm start?
  27. Node.js – SyntaxError: Unexpected token import
  28. nodemon not working: -bash: nodemon: command not found
  29. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  30. nodemon not found in npm
  31. Node.js – SyntaxError: Unexpected token import
  32. ‘npm’ is not recognized as an internal or external command, operable program or batch file
  33. ExpressJS – throw er Unhandled error event
  34. What exactly is the ‘react-scripts start’ command?
  35. npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY
  36. npm ERR! registry error parsing json – While trying to install Cordova for Ionic Framework in Windows 8
  37. Why am I getting “Error socket hang up” response?
  38. “You seem to not be depending on “@angular/core”.”
  39. Node.js Port 3000 already in use but it actually isn’t?
  40. Unable to resolve dependency tree error when installing npm packages
  41. npm – EPERM: operation not permitted on Windows
  42. Module not found can’t resolve
  43. What Are “npm run dev” and “npm run prod”
  44. Find the version of an installed npm package
  45. What does this “react-scripts eject” command do?
  46. How to use npm jquery module?
  47. React Uncaught Error: Target container is not a DOM element [duplicate]
  48. Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’
  49. Why am I seeing net::ERR_CLEARTEXT_NOT_PERMITTED errors after upgrading to Cordova Android 8?
  50. ExpressJS – throw er Unhandled error event
  51. Webpack – Critical dependency: the request of a dependency is an expression
  52. Error “Cannot find module ‘npmlog'” after “npm update -g”
  53. error: This is probably not a problem with npm. There is likely additional logging output above
  54. Node update a specific package
  55. Error: Cannot find module ‘webpack’
  56. npm – “Can’t find Python executable “python”, you can set the PYTHON env variable.”
  57. Webpack: “there are multiple modules with names that only differ in casing” but modules referenced are identical
  58. CentOS error – sudo: effective uid is not 0, is sudo installed setuid root?
  59. How to install npm peer dependencies automatically?
  60. How to Reinstall Broken npm
  61. Block-scoped declarations not yet supported outside strict mode
  62. Local package.json exists, but node_modules missing
  63. Cannot npm install due to node-gyp: binding.gyp not found
  64. Downgrade npm to an older version
  65. How do I fix the npm UNMET PEER DEPENDENCY warning?
  66. Entrypoint undefined = index.html using HtmlWebpackPlugin
  67. `node-pre-gyp install –fallback-to-build` failed during MeanJS installation on OSX
  68. npm install resulting in ‘ENOENT: no such file or directory’
  69. ExpressJS vs MeteorJS
  70. node.js: cannot find module ‘request’
  71. How can I use webpack with express?
  72. webpackJsonp is not defined
  73. Angular 2 : No NgModule metadata found
  74. NPM self_signed_cert_in_chain
  75. Vue ‘export default’ vs ‘new Vue’
  76. npm WARN package.json: No repository field
  77. How to use bootstrap 4 in angular 2?
  78. npm “failed to parse json”
  79. Npm Error – Windows NT – How to resolve
  80. How To Save Canvas As An Image With canvas.toDataURL()?
  81. NPM install fails with node-gyp
  82. How to make Font awesome 5 work with webpack
  83. JAVA_HOME is set to an invalid directory:
  84. How to properly upgrade node using nvm
  85. How can I cache image files locally with PhoneGap / Cordova?
  86. npm install with error: `gyp` failed with exit code: 1
  87. npm update check failed
  88. Error: EPERM: operation not permitted, unlink ‘D:\Sources\**\node_modules\fsevents\node_modules\abbrev\package.json’
  89. While doing npm install getting an error as “No such file or directory open”
  90. What are differences between SystemJS and Webpack?
  91. npm init not working and getting stuck on version
  92. Cannot find module ‘webpack/bin/config-yargs’
  93. GYP ERR! build error. stack Error: ‘make’ failed with exit code 2
  94. Can pm2 run an ‘npm start’ script
  95. What is the difference between Bower and npm?
  96. How do I install Angular 2 using NPM?
  97. npm update to specific version (and shrinkwrap)
  98. how to update npm on macOS
  99. nvm is not compatible with the npm config “prefix” option:
  100. angular-cli where is webpack.config.js file – new angular6 does not support ng eject

Leave a Comment