Ralat: Sumber tidak boleh dihuraikan untuk analisis import kerana kandungan mengandungi sintaks JS yang tidak sah

Question

Apabila saya menggunakan vite+vue untuk menguji unit komponen web, saya mengalami ralat ini:

Ralat: Sumber tidak boleh dihuraikan untuk analisis import kerana kandungan mengandungi sintaks JS yang tidak sah. Anda mungkin perlu memasang pemalam yang sesuai untuk mengendalikan format fail .html. ❯ formatRalat 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 ❯ Asynchronous Object.transform node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38900:30 ❯ Asynchronous doTransform node_modules/vite/dist/node/chunks/dep-59dc6e00.js:55857:29

Bagaimana untuk menyelesaikan masalah ini?

Answer 1

Bahagian HTML fail yang ditunjukkan di sini dianggap sebagai javascript, yang bermaksud Vue tidak mengenali HTML ini.

Dalam kes saya, ralat adalah kerana saya menamakan komponen *.Vue (modal V) dan bukannya *.vue.

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

Saya terpaksa menukar nama fail kepada .vue dan menukar penyata import untuk membolehkannya berfungsi. Saya juga memulakan semula pelayan (untuk berjaga-jaga)

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

Ini mungkin kerana fail .Vue dianggap sebagai fail js biasa (bukan komponen).. Hanya tekaan, saya baru menggunakan Vue.