Reputation: 21
When I using vite + vue to do the unit testing for web components, I met this error:
Error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins 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 ❯ async Object.transform node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38900:30 ❯ async doTransform node_modules/vite/dist/node/chunks/dep-59dc6e00.js:55857:29
How can I solve this problem?
Upvotes: 2
Views: 6749
Reputation: 1036
It appears here that the HTML part of the file is being treated as javascript, meaning Vue does not recognize this HTML.
In my case error was because I named one Component as *.Vue (capital V) and not as *.vue.
import MyComp from "@/components/MyComp.Vue"; //This does not work.
I had to change the file name to .vue and the import statement to get it working. I also restarted the server (just in case)
import MyComp from "@/components/MyComp.vue"; //This does work with same file name.
This may be because .Vue files are treated as normal js files (not as components).. just a guess, I am new to Vue.
Upvotes: 2