mmmmmlf
mmmmmlf

Reputation: 21

Error: Failed to parse source for import analysis because the content contains invalid JS syntax

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

Answers (1)

Sandeep Dixit
Sandeep Dixit

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

Related Questions