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

Created on 4 Mar 2018 · 17Comments · Source: jantimon/html-webpack-plugin

Error Message & Stack Trace

(node:71449) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:71449) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
TypeError: cb is not a function
    at compilation.plugin (/xxxxxx/.electron-vue/dev-runner.js:54:9)
    at Promise (eval at create (/xxxxx/node_modules/tapable/lib/HookCodeFactory.js:51:12), <anonymous>:11:16)
    at new Promise (<anonymous>)
    at AsyncSeriesWaterfallHook.eval [as promise] (eval at create (/xxxxxxx/node_modules/tapable/lib/HookCodeFactory.js:51:12), <anonymous>:4:8)
    at AsyncSeriesWaterfallHook.lazyCompileHook [as _promise] (/xxxxxx/node_modules/tapable/lib/Hook.js:35:21)
    at /xxxxx/node_modules/html-webpack-plugin/index.js:645:47
    at Promise.resolve.then.then.then.then.then.then.then.then.catch.then.then (/xxxxxx/node_modules/html-webpack-plugin/index.js:209:21)
    at <anonymous>

Config

module.exports = {
  entry: 'app.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      ...
    ]
  }
  plugins: [
      new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      }
    }),
    ...
  ]
}

Html template file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>togacat</title>
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
      <script>
        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
      </script>
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <script>
      if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    </script>

  </body>
</html>

Environment

Node.js v8.9.4
darwin 17.2.0
npm 5.6.0
webpack 4.1.0
html-webpack-plugin 3.0.4

Source

alhazmy13

Most helpful comment

@theodorejb @alhazmy13 You may find out where the root cause is by setting process.traceDeprecation = true; in your webpack config or something. Then, you'll be able to see what line triggers the warning.

@alhazmy13 BTW, I noticed you're using electron-vue right? So, the warning actually comes from electron-vue's dev-runner.js. It's not html-webpack-plugin's fault. You can fix the code by conforming to the new API system, e.g.

compiler.hooks.compilation.tap('dev-runner', compilation => {
  compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('dev-runner', (data, cb) => {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
}))

FYI, there're several lines of code need to be revised as well.

qazbnm456 on 7 Mar 2018

❤6

All 17 comments

I think this bug is caused by webpack upgrade, Plugin API has been changed, but some plugins are not yet compatible with webpack v4

kagawagao on 5 Mar 2018

html-webpack-plugin seem to use the old plugin api in two places:

https://github.com/jantimon/html-webpack-plugin/blob/master/index.js#L65
https://github.com/jantimon/html-webpack-plugin/blob/master/index.js#L85

there should be a check like in other parts of that file (if (compiler.hooks) {compiler.hooks.emit.tap} else {compiler.plugin(...)}

andriijas on 5 Mar 2018

👍1

Duplicate of #874

Gisleburt on 5 Mar 2018

Should be fixed in 3.0.5.

jantimon on 6 Mar 2018

👍3

Does fix deprecated warning, still doesn't load plugins in webpack 4. I've created #887 for that.

Gisleburt on 6 Mar 2018

@jantimon
still here, call compiler.apply directly is also deprecated

kagawagao on 6 Mar 2018

👍2

@kagawagao thanks for the head up :)
what would be the new syntax for that?

jantimon on 6 Mar 2018

in the stack trace

DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

I guess it should be

new NodeTemplatePlugin(outputOptions).apply(childCompiler)

kagawagao on 6 Mar 2018

Thanks @kagawagao - it's released in 3.0.6

jantimon on 6 Mar 2018

I'm still getting the following warning in v3.0.6:

(node:10052) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

Edit: maybe it's coming from the html-webpack-include-assets-plugin module instead of this one?

theodorejb on 6 Mar 2018

Yes, still I the issue exist with version 3.0.6

(node:93696) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
TypeError: cb is not a function
    at Promise (eval at create (/xxx/node_modules/tapable/lib/HookCodeFactory.js:51:12), <anonymous>:11:16)
    at new Promise (<anonymous>)
    at AsyncSeriesWaterfallHook.eval [as promise] (eval at create (/xxx/node_modules/tapable/lib/HookCodeFactory.js:51:12), <anonymous>:4:8)
    at AsyncSeriesWaterfallHook.lazyCompileHook [as _promise] (/xxx/node_modules/tapable/lib/Hook.js:35:21)
    at /xxx/node_modules/html-webpack-plugin/index.js:647:47
    at Promise.resolve.then.then.then.then.then.then.then.then.catch.then.then (/xxx/node_modules/html-webpack-plugin/index.js:211:21)
    at <anonymous>

alhazmy13 on 6 Mar 2018

compiler.hooks.compilation.tap('dev-runner', compilation => {
  compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('dev-runner', (data, cb) => {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
}))

FYI, there're several lines of code need to be revised as well.

qazbnm456 on 7 Mar 2018

❤6

@qazbnm456 Thanks for your support, solved with your code.

alhazmy13 on 7 Mar 2018

@jantimon I dont't think it has been fixed. In version 3.2.0, same error is showed.
cb is not a function …… at Promise (eval at create (*******\node_modules\html-webpack-plugin\node_modules\tapable\lib\HookCodeFactory.js:51:12), <anonymous>:11:16)

gaterking on 3 Apr 2018

@gaterking please create a new issue with a minimal reproduction example
and a stacktrace (please use process.traceDeprecation = true)

jantimon on 3 Apr 2018

@jantimon
It's my fault, I forget to update html-webpack-plugin-after-emit to webpack 4.

compiler.hooks.compilation.tap('html-webpack-plugin-after-emit', () => {  
        hotMiddleware.publish({  
              action: 'reload'  
        });  
     });

In webpack 3 code:

 compiler.plugin('compilation', (compilation) => {
        compilation.plugin('html-webpack-plugin-after-emit', (data, cb) => {
            hotMiddleware.publish({
                action: 'reload'
            });
            // cb();
        });
    });

gaterking on 8 Apr 2018

👍4

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.