web-dev-qa-db-fra.com

DeprecationWarning: Tapable.plugin est obsolète. Utiliser une nouvelle API sur `.hooks` à la place

J'ai essayé d'exécuter l'exemple Vuetify VueJS Cordova mais j'ai eu cette erreur après npm run dev

noeud build/dev-server.js

Démarrage du serveur de développement ... (noeud: 1024) DeprecationWarning: Tapable.plugin est obsolète. Utilisez la nouvelle API sur .hooks à la place (node: 1024) DeprecationWarning: Tapable.apply est obsolète. Appel appliquer directement sur le plugin

Comment résoudre ce problème? J'ai déjà mis à jour tous les packages NPM, je n'ai pas aidé.

10
Tom

Le message de dépréciation:

DeprecationWarning: Tapable.apply est obsolète. Appelez appliquer sur le plugin directement à la place
DeprecationWarning: Tapable.plugin est obsolète. Utilisez la nouvelle API sur .hooks à la place

Est juste un avertissement :

Voici un résumé rapide pour toutes les personnes rencontrant ce message.

Quel est ce message?

webpack 4 utilise un nouveau système de plug-in et désapprouve les API précédentes. Il y a 2 nouveaux avertissements:

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

Ce sont des avertissements. Ils sont envoyés à la console pour avertir nos utilisateurs qu'ils utilisent une API obsolète et qu'ils doivent migrer vers le le plus récent.

Comment mauvais sont ces avertissements?

Ce ne sont que des informations textuelles, pas des erreurs. Si vous voyez une DeprecationWarning, vous pouvez l'ignorer jusqu'à ce que vous ayez à mettre à jour la prochaine version majeure de webpack.

Donc, vous n'avez ni ne devriez rien faire à ce sujet.


Autre que cela, j'espère que vous recevez une erreur comme:

/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.

Vous devriez mettre à jour votre html-webpack-plugin vers la dernière version :

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

Et l'erreur devrait disparaître.

12
acdcjunior

Cet avertissement peut être causé par plusieurs plug-ins sur Webpack 4, car ils utilisent encore l'ancienne API de plug-in. Ils doivent être mis à niveau vers la dernière version. Pour trouver le (s) plugin (s) à l'origine de l'avertissement, placez-le en haut de votre fichier de configuration webpack:

process.traceDeprecation = true

Vous verrez une trace de pile détaillée comme ceci:

 (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

Dans ce cas, cela signifie que friendly-errors-webpack-plugin est responsable de l'avertissement.

Vous pouvez également exécuter votre processus de noeud en ajoutant l'indicateur --trace-deprecation.

Une fois que vous avez trouvé le plug-in à l'origine de l'avertissement, mettez-le à jour à l'aide de votre gestionnaire de paquets. Cet avertissement devrait disparaître:

yarn upgrade friendly-errors-webpack-plugin

Si vous ne voulez pas supprimer complètement les avertissements de dépréciation tels que celui-ci (NON RECOMMANDÉ), utilisez process.noDeprecation = true

Cela a fonctionné pour moi pour trouver rapidement le problème, j'espère que cela aidera les autres.

6
Maikel Ruiz

Je faisais face au même problème. Résolu en utilisant cette commande: -

npm install --save-dev extrait-text-webpack-plugin @ suivant 

NPM 6.4.1
Node 10.9.0
Webpack 4.22.0 
3
Nidhi

Dans mon cas, le problème venait de webpack-cleanup-plugin. Je l'ai corrigé après avoir remplacé ce plugin par clean-self-webpack-plugin.

J'ai rencontré ce problème lorsque j'ai tenté d'exécuter Webpack-dev-server deux fois, l'un sur un terminal, l'autre sur un autre. L'exécution d'un seul problème a résolu le problème.

0
hsintuit