React-styleguidist: Investigate webpack DeprecationWarning

[sapegin]

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

I guess it's related to webpack 4 update, but I'm not sure where it's coming from.

[giacomocerquone]

https://github.com/webpack/webpack/issues/6568#issuecomment-377491754

Does it help?

[sapegin]

I guess it could help if anyone would try ;-)

[giacomocerquone]

config with process.traceDeprecation = true at the top

(node:7196) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    at StyleguidistOptionsPlugin.apply (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\react-styleguidist\scripts\utils\StyleguidistOptionsPlugin.js:15:12)
    at webpack (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\webpack\lib\webpack.js:37:12)
    at createServer (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\react-styleguidist\scripts\create-server.js:29:19)
    at server (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\react-styleguidist\scripts\server.js:7:21)
    at commandServer (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\react-styleguidist\bin\styleguidist.js:120:19)
    at Object.<anonymous> (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\react-styleguidist\bin\styleguidist.js:69:3)
    at Module._compile (module.js:641:30)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Function.Module.runMain (module.js:682:10)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:613:3
(node:7196) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
    at Object.compileTemplate (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\html-webpack-plugin\lib\compiler.js:48:17)
    at C:\Users\Giacomo\Documents\Github\truccheria\node_modules\html-webpack-plugin\index.js:61:40
    at AsyncParallelHook.eval [as callAsync] (eval at create (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:13:1)
    at AsyncParallelHook.lazyCompileHook [as _callAsync] (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\tapable\lib\Hook.js:35:21)
    at hooks.beforeCompile.callAsync.err (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\webpack\lib\Compiler.js:474:20)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\tapable\lib\Hook.js:35:21)
    at Compiler.compile (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\webpack\lib\Compiler.js:467:28)
    at compiler.hooks.watchRun.callAsync.err (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\webpack\lib\Watching.js:77:18)
    at _err1 (eval at create (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:20:1)
    at compilerInvalid (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\webpack-dev-middleware\lib\Shared.js:161:5)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:16:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\tapable\lib\Hook.js:35:21)
    at Watching._go (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\webpack\lib\Watching.js:40:32)
    at Watching.compiler.readRecords.err (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\webpack\lib\Watching.js:32:9)
    at Compiler.readRecords (C:\Users\Giacomo\Documents\Github\truccheria\node_modules\webpack\lib\Compiler.js:340:11)

[sapegin]

Thanks! That's our own plugin ;-)

[sapegin]

Fixed in dea7bdda0047652596214130b049786c73d036a8.

[shelldandy]

I still see this on the latest version 😢

[tmf]

Hi everyone,
I just ran into the same issue...
https://github.com/styleguidist/react-styleguidist/issues/910#issuecomment-377588489 did have 2 deprecation warnings: at react-styleguidist\scripts\utils\StyleguidistOptionsPlugin.js:15:12 and html-webpack-plugin\lib\compiler.js:48:17.
I get an additional warning with:

(node:74671) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    at new Server (/Users/tmf/projects/styleguide/node_modules/webpack-dev-server/lib/Server.js:68:12)
    at createServer (/Users/tmf/projects/styleguide/node_modules/react-styleguidist/scripts/create-server.js:28:20)
    at server (/Users/tmf/projects/styleguide/node_modules/react-styleguidist/scripts/server.js:5:21)

so, according to https://webpack.js.org/api/compilation-hooks/
https://github.com/styleguidist/react-styleguidist/blob/d4be4f5196cd60f68aea09aa1b8017b6aedcf395/scripts/utils/StyleguidistOptionsPlugin.js#L14 should be refactored into something similar to https://github.com/jantimon/html-webpack-plugin/commit/2288f20ee3185c2ace0c8e97a1c32e2a7e11f0e0

(🤯)