Erreur : La source ne peut pas être analysée pour l'analyse d'importation, car le contenu contient une syntaxe JS non valide

Question

Lorsque j'ai utilisé vite+vue pour tester unitairement un composant Web, j'ai rencontré cette erreur :

Erreur : la source ne peut pas être analysée pour l'analyse d'importation car le contenu contient une syntaxe JS non valide. Vous devrez peut-être installer le plugin approprié pour gérer le format de fichier .html. ❯ formatError node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38663:46 ❯ TransformContext.error node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38659:19 ❯ TransformContext.transform node_modules/vite/dist/node/chunks/dep-59dc6e00.js:56777:22 ❯ Objet asynchrone.transform node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38900:30 ❯ DoTransform asynchrone node_modules/vite/dist/node/chunks/dep-59dc6e00.js:55857:29

Comment résoudre ce problème ?

Answer 1

La partie HTML du fichier présenté ici est traitée comme javascript, ce qui signifie que Vue ne reconnaît pas ce HTML.

Dans mon cas, l'erreur était due au fait que j'avais nommé un composant *.Vue (V majuscule) au lieu de *.vue.

import MyComp from "@/components/MyComp.Vue"; //This does not work.

J'ai dû changer le nom du fichier en .vue et modifier les instructions d'importation pour que cela fonctionne. J'ai aussi redémarré le serveur (juste au cas où)

import MyComp from "@/components/MyComp.vue"; //This does work with same file name.

Cela peut être dû au fait que les fichiers .Vue sont traités comme des fichiers js normaux (et non comme des composants). Juste une supposition, je suis nouveau sur Vue.