20 problèmes récurrents lorsque vous débutez avec Vue JS

Vue JS est un framework progressif pour JavaScript utilisé pour créer des interfaces Web et des applications à page unique. Vue JS peut aussi être utilisée pour le développement d’applications de bureau avec le framework Electron.

Lorsque vous débutez avec un framework comme Vue JS, il y a de fortes chances que vous rencontriez des problèmes ou des erreurs dont vous ne savez pas immédiatement comment les résoudre. Dans cet article, nous allons voir 20 problèmes récurrents que vous pourriez rencontre lorsque vous débutez avec Vue JS.

Error: Cannot find module ‘webpack.ProvidePlugin’

Lorsque vous rencontrez une erreur comme celle-ci, la première des choses, c’est de vous rassurer que vous utilisez une version récente de web pack et de vue-cli. Si l’erreur ne disparaît toujours pas, même après la mise à jour, c’est que c’est sans doute une erreur de syntaxe.

Au lieu de :

Utlisez plutôt :

Template compilation error : v-model value must be a valid JavaScript member expression

Cette erreur veut dire que vous essayez d’avoir accès à un membre qui n’existe pas, essayez de voir la valeur du membre auquel vous essayez d’avoir accès en utilisant console.log(membre) dans la fonction mounted() de Vue.

Si le membre en question a une valeur, c’est que c’est sans doute un problème lié à la version de vue JS, essayez de mettre à jour votre version Vue JS à la version la plus récente.

Uncaught ReferenceError : createRouter is not defined

Lorsque vous voyez cette erreur, rassurez-vous que vous avez dit à Vue d’utiliser le router :

Si l’erreur ne disparaît pas, essayer le code suivant :

Uncaught TypeError: Object(…) is not a function Vue JS

Si vous voyez cette erreur lorsque vous utilisez le router, le problème est sans doute lié à la version du router. Pour Vue JS version 3 la bonne version de router à utiliser est la version 4.

Property ‘…’ was accessed during render but is not defined on instance

Cette erreur se produit souvent lorsque vous utilisez v-for et v-if sur le même élément. Ce qui faut faire c’est de les mettre chacun sur un élément.

[Vue warn]: Cannot find element: #app

Cette erreur se produit souvent lorsque Vue n’arrive pas à trouver un élément avec l’ID de app, donc rassurez-vous que vous avez bien un élément avec cet ID. Cette erreur peut aussi se produit lorsque vous essayez d’effectuer une migration de Vue cli de la version 2 à la version 3. Si t’elle est le cas alors l’erreur peut se produire à cause du fait que, dans la version 3 de Vue cli, le fichier index.html est dans le dossier public, donc rassurez-vous que index.html s’y trouve bien.

Vue : Type ‘Ref<unknown>’ is not assignable to type ‘string’.ts

Cette erreur se produit souvent lorsque vous utilisez typescript, qui est Javascript mais avec plus d’accent sur le type de données. Donc lorsque vous voyez ce genre d’erreur rassurez-vous que l’élément auquel vous voulez attribuer une valeur respect le type défini.

Au lieu de :

Utilisez plutôt :

VueJS $refs are undefined

Les $refs sont utilisés en Vue pour pouvoir avoir accès à un élément particulier du DOM, mais pour que le $refs ne soit pas undefined, il faut que l’élément auquel il soit rattaché apparaisse sur le DOM.

Par exemple en utilisant v-if pour faire apparaitre et disparaitre un élément du DOM, ce que v-if fait c’est qu’il retire complètement l’élément sur lequel il est appliqué du DOM lorsqu’il faut que l’élément disparaisse et le remet lorsqu’il faut que l’élément réapparaisse.

Donc ce qui fait que si vous utilisez $refs lorsque l’élément en question n’est pas encore présent dans le DOM, $refs n’aura aucune valeur et l’erreur « $refs are undefined » va se produire.

Property or method “…” is not defined on the instance but referenced during render

Cette erreur veut tout simplement dire que vous essayez d’avoir accès à un élément que vous avez utilisé dans un autre composant, mais l’élément-là est utilisé, mais n’est pas défini dans le composant actuel.

Tout ce qui se trouve dans le composant parent est compilé dans la portée parent et tout dans le composant enfant est compilé dans la portée enfant.

Template compilation error: v-model can only be used on <input>, <textarea> and <select> elements

Comme son nom l’indique, cette erreur veut tout simplement dire que v-model ne peut être utilisé que sur des éléments qui peuvent recevoir des valeurs de différents utilisateurs.

Vuetify error generated on existant project

Si vous rencontrez ce genre de problème, c’est tout simplement parce que vous n’avez peut-être pas suivi la procédure d’installation recommander. L’installation recommandé

Errors while doing vue add vuetify

Cette erreur est due au fait que vuetify version 2 ne support pas vue 3, donc si vous voulez utiliser vuetify 2, il faut l’installer en utilisant vue 2. Par contre si vous voulez utilisez vue 3 pour votre installation, c’est vuetify 3 que vous devez utiliser.

[vite] Internal server error: [@vue/compiler-sfc] <script setup> cannot contain ES module exports

Cette erreur se produit souvent lorsque vous mélangez deux différentes méthodes pour créer un composant dans Vue JS. Dans le code suivant nous pouvons voir que setup est utilisé deux fois, or, ce sont les deux différentes méthodes pour créer des composants, donc surtout à ne pas faire. Pour la solution cliquez ici.

TypeError: this.getOptions is not a function

Si vous rencontrez cette erreur lorsque vous esseyez d’installer Sass-loader dans un projet Vue, cest parce que sass-loader de la version 11 en montant on besoin de wepback version 5, donc le mieu a faire est d’utiliser sass-loader version 10.

Error when installing node-sass for Vue JS project

Cette erreur est souvent causée par le fait que node-sass est incompatible avec la version 16 de node. sur certain forum de développeur, ceux qui utilisent la version 14 de node n’ont pas ce problème. Au lieu de rentrer à la version 14 de node pour éviter cette erreur, voici une meilleure solution.

Wepback dev server invalid options

Si vous utilisez Vue et que vous rencontrez ce genre de problèmes en essayant d’installer certains modules, voici une solution adéquate.

VueJS – Unit testing with vue-test-utils gives error – TypeError: _vm.$t is not a function

Cette erreur peut avoir plusieurs causes, mais l’une d’elle est reliée à vue i18 n et au fait que vous n’avez pas Vue i18n lorsque vous déclarez vos composants dans le fichier teste. Une solution à ce problème serait la suivante.

Syntax Error: SassError: This file is already being loaded.

Cette erreur veut tout simplement dire que vous essayez d’importer le même module deux fois. Vous devriez vous rassurer que votre composant n’importe pas des modules qui sont déjà importés globalement, comme le montre cette page où il import colors.scss deux fois.

Npm node-sass stack Error: EACCES: permission denied

Cette erreur signifie que vous devez installer ce module en étant administrateur ou vous devez utiliser le flag « –unsafe-perm » comme le montre ce code.

SassError: File to import not found or unreadable: style.scss

Cette erreur se produit souvent lorsque vous essayez d’importer un module ou un fichier qui n’existe pas. Donc rassurez-vous toujours que votre fichier existe, si oui, rassurez-vous que les noms concordent.

Unexpected token for private variables in TypeScript 2.9.1

Cette erreur se produit souvent lorsqu’il y a des dépendances qui sont en conflit. Une solution serait de retirer toutes les dépendances que vous n’utilisez plus et d’aussi n’nettoyer le fichier tslint.json.