Error: The source cannot be parsed for import analysis because the content contains invalid JS syntax

Question

When I used vite vue to unit test the web component, I encountered this error:

Error: The source cannot be parsed for import analysis because the content contains invalid JS syntax. You may need to install the appropriate plugin to handle the .html file format. ❯ 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 ❯ 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

how to solve this problem?

Answer 1

The HTML part of the file shown here is treated as javascript, which means Vue does not recognize this HTML.

In my case, the error was because I named a component *.Vue (capital V) instead of *.vue.

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

I had to change the filename to .vue and change the import statements to get it to work. I also restarted the server (just in case)

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

This might be because .Vue files are treated as normal js files (not components).. Just guessing, I'm new to Vue.