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

[ArthurDanjou]

Versions

nuxt-vite: 0.0.36 nuxt: 2.15.3

Reproduction

https://github.com/ArthurDanjou/artsite/tree/dev

Description

When i start the dev server with yarn dev, during the bundle i have this error :

 ERROR  Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.                    09:51:39

  at formatError (node_modules\vite\dist\node\chunks\dep-efe32886.js:43451:46)
  at TransformContext.error (node_modules\vite\dist\node\chunks\dep-efe32886.js:43447:19)
  at TransformContext.transform (node_modules\vite\dist\node\chunks\dep-efe32886.js:44932:22)
  at async Object.transform (node_modules\vite\dist\node\chunks\dep-efe32886.js:43649:30)
  at async transformRequest (node_modules\vite\dist\node\chunks\dep-efe32886.js:59310:29)
  at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:356:5)
  at async Promise.all (index 1)
  at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:358:5)
  at async Promise.all (index 7)
  at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:358:5)
  at async Promise.all (index 4)
  at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:358:5)
  at async Promise.all (index 0)
  at async warmupViteServer (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:360:3)

In addition, I have a question, do we need to add a vite.config.js file ?

[morelearn1990]

Maybe can use rollup hooks transform to transforming custom file types. But I don't know how to do it

[prd-y-nguyen]

I'm having the same problem here, the terminal show:

Unrestricted file system access to "/@id/defaultexport:C:/Users/OS/.../.nuxt/components/plu
gin.js"


 WARN  For security concerns, accessing files outside of serving allow list will be restricted by default in the future version of Vite. Refer to https://vitejs.dev/config
/#server-fs-allow for more details.


 WARN  Unrestricted file system access to "/@id/defaultexport:C:/Users/OS/.../.nuxt/composition-ap
i/plugin.mjs"

...
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 for
mat.

  at formatError (node_modules\vite\dist\node\chunks\dep-cc49d7be.js:50135:46)
  at TransformContext.error (node_modules\vite\dist\node\chunks\dep-cc49d7be.js:50131:19)
  at TransformContext.transform (node_modules\vite\dist\node\chunks\dep-cc49d7be.js:73380:22)
  at async Object.transform (node_modules\vite\dist\node\chunks\dep-cc49d7be.js:50336:30)
  at async transformRequest (node_modules\vite\dist\node\chunks\dep-cc49d7be.js:65952:29)
  at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:386:5)
  at async Promise.all (index 6)
  at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:388:5)
  at async Promise.all (index 5)
  at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:388:5)
  at async Promise.all (index 9)
  at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:388:5)
  at async Promise.all (index 4)
  at async warmup (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:388:5)
  at async Promise.all (index 0)
  at async warmupViteServer (node_modules\nuxt-vite\dist\nuxt-vite.js-vite.js:390:3)

[TheAlexLichter]

Had that error on a Vite + Vue 3 + TS project recently when the files were accidentally compiled to .js files as well by my IDE. Removing the compiled files resolved it

[mbossX]

export default {
  path: '/setting',
  component: () => import('./view.vue')
};

this will case error. change path: '/setting' to path: '//setting', error gone.

please fix this.

[dankimio]

Getting the same error when using nuxt-content with Markdown.

[divinrkz]

Same issue here

[thecoconutdream]

Any news on this issue? I'm having this issue with Nuxt3 / Vue3 /Cypress

[TheAlexLichter]

Any news on this issue? I'm having this issue with Nuxt3 / Vue3 /Cypress

If you face this issue with Nuxt3, please open an issue in the framework repo and feel free to link this one inside.

[kewp]

I feel like this issue might have a simple cause: running vite in the wrong directory. It keeps happening to me but it's always because I'm not in my app's root folder

[wohui]

i meet the error info : Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .css file format. env:nuxt-rc2,primevue,only css use "primeicons/primeicons.css", //icons

[ohot2015]

it's work &::before { //content: ''; }

====== it's don't work &::before { content: ''; }

it's work .carousel { display: block; @media(max-width: 1200px) { display: grid; // grid-template-areas: // "gallery gallery" // "arrowLeft arrowRight"; grid-template-columns: 1fr 1fr; } }

it's don't work .carousel { display: block; @media(max-width: 1200px) { display: grid; grid-template-areas: "gallery gallery" "arrowLeft arrowRight"; grid-template-columns: 1fr 1fr; } }

[phpjscoding]

had same issue,I fixed it by changing .js to .jsx in the file that had the error

[itzAmka]

had same issue,I fixed it by changing .js to .jsx in the file that had the error

Also this worked for me. Thank you!

[quantuminformation]

I'm now getting this error for a file called

index.test.jsx

 src/Pages/WelcomePage/views/SelectUser/index.test.jsx [ src/Pages/WelcomePage/views/SelectUser/index.test.jsx ]
Error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
 ❯ formatError node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39055:46
 ❯ TransformContext.error node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39051:19```

<img width="812" alt="image" src="https://user-images.githubusercontent.com/216566/176856577-e14c8b60-e9c0-4b41-8a05-47227ab3e818.png">

[kapilpipaliya]

I get following error:

Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. (x4)
Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. (x5)
1:30:27 am [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: D:/ok/ok/ok_web_components/node_modules/@thisbeyond/solid-dnd/dist/source/drag-drop-context.jsx?v=09bbb5ec

I downgrade to "vite": "3.0.9", and it solved the problem.

[ahm-r7]

had same issue,I fixed it by changing .js to .jsx in the file that had the error

ok it works but I want to make it accept .js instead of .jsx

[vecter]

Had that error on a Vite + Vue 3 + TS project recently when the files were accidentally compiled to .js files as well by my IDE. Removing the compiled files resolved it

Can you expand on this? I'm not following: what was compiled to js by accident, and what should it have been compiled to instead?

[DimitrijeD]

In my case I had a class in separate file which I imported somewhere.

I didn't close brackets properly: eg.

(new MyClass( 'data')) .doSomething( // <- missing closing bracket

And for what ever reason, error is saying

Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

and is pointing to import (for what ever bizare reason) instead of where class instantiation is missing brackets.

Hope it helps.

[AnjaRoseBikes]

Any news on this issue? I'm having this issue with nuxt 3.0.0, @nuxtjs/tailwind, histoire @histoire/plugin-nuxt @histoire/plugin-vue

[ekunemmanuel]

Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

[AnjaRoseBikes]

In my case it helped to set the language attribute explicit to typescript in the script tag of my Vue components:

<script setup lang="ts">

[kingeke]

Vite is amazing, and super fast... but it should accept JS files and not force us to rewrite all our files to JSX, isn't there any fix for this?.. searched everywhere