錯誤：無法解析來源以進行匯入分析，因為內容包含無效的 JS 語法

Question

當我使用vite vue對Web元件進行單元測試時，遇到了這個錯誤：

錯誤：無法解析來源以進行導入分析，因為內容包含無效的 JS 語法。您可能需要安裝適當的外掛程式來處理 .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 ❯ 非同步 Object.transform node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38900:30 ❯ 非同步 doTransform node_modules/vite/dist/node/chunks/dep-59dc6e00.js:55857:29

如何解決這個問題？

Answer 1

這裡顯示檔案的 HTML 部分被視為 javascript，這表示 Vue 無法辨識此 HTML。

在我的例子中，錯誤是因為我將一個元件命名為 *.Vue（大寫 V），而不是 *.vue。

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

我必須將檔案名稱更改為 .vue 並更改導入語句才能使其正常工作。 我還重新啟動了伺服器（以防萬一）

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

這可能是因為 .Vue 檔案被視為普通的 js 檔案（而不是元件）..只是猜測，我是 Vue 新手。