please, I have problem with Vite server and ReactJS

Version of ReactJS:

fox@mustang:~/projects/nazory.sk$ node -v
v18.14.0
fox@mustang:~/projects/nazory.sk$ npm -v
9.3.1

I'm getting vite import-analysis problem. The Error is:

2:39:47 PM [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: /home/fox/projects/nazory.sk/src/ponents/aside.js:6:30
  2  |  function Aside() {
  3  |    return <aside>
  4  |        <h2>Discussion Panel</h2>
     |                                 ^
  5  |      </aside>;
  6  |  }
      at formatError (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41389:46)
      at TransformContext.error (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41385:19)
      at TransformContext.transform (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:39628:22)
      at async Object.transform (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41660:30)
      at async loadAndTransform (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:39466:29)

From this ponent

import React from 'react'

function Aside() {
  return (
    <aside>
      <h2>Discussion Panel</h2>
    </aside>
  )
}

export default Aside

File is named 'ponents/aside.js'

But for example my Header is OK and it's the totally same

import React from 'react'

function Header() {
  return (
    <header className="header">
      <h1>Názory.sk</h1>
      <div>Žurnalistika ľudí - Články a slobodné diskusie bez reakcií na diskutujúcich</div>
    </header>
  )
}

export default Header

File is saved as ponents/header.js

I'm importing and using in App.jsx my all ponents

import Header from './ponents/header' import Article from './ponents/Article' import Aside from './ponents/aside'

function App() {
  // Render poment
  return (
    <main className="container">
      <Header />
      <Article />
      <Aside />
      <footer className="footer">&copy;2023 - Frisky Fox</footer>
    </main>
  )
}

export default App

One important thing:

If I have also footer.js in ponents the error is there. It's always on the last ponent.

My package.json

{
  "name": "nazory.sk",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.1.0"
  }
}

My vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// /config/
export default defineConfig({
  plugins: [react()],
})

I have only LTS ReactJS so answer here doesn't help:

vite - create-vite got error in node version 18

Btw, I've tried using Brackets, without brackes if I had only return <footer></footer>. I've tried also using semi set to prettier, nothing helps. And always is error on the last impotent ponent. The reason why I have error on aside.js is that I haven't footer.js like ponent. If I create new ponent for footer and call id in App.js the error will in footer.js

I think that this sould be vite bug, couldn't be?

please, I have problem with Vite server and ReactJS

Version of ReactJS:

fox@mustang:~/projects/nazory.sk$ node -v
v18.14.0
fox@mustang:~/projects/nazory.sk$ npm -v
9.3.1

I'm getting vite import-analysis problem. The Error is:

2:39:47 PM [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: /home/fox/projects/nazory.sk/src/ponents/aside.js:6:30
  2  |  function Aside() {
  3  |    return <aside>
  4  |        <h2>Discussion Panel</h2>
     |                                 ^
  5  |      </aside>;
  6  |  }
      at formatError (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41389:46)
      at TransformContext.error (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41385:19)
      at TransformContext.transform (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:39628:22)
      at async Object.transform (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41660:30)
      at async loadAndTransform (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:39466:29)

From this ponent

import React from 'react'

function Aside() {
  return (
    <aside>
      <h2>Discussion Panel</h2>
    </aside>
  )
}

export default Aside

File is named 'ponents/aside.js'

But for example my Header is OK and it's the totally same

import React from 'react'

function Header() {
  return (
    <header className="header">
      <h1>Názory.sk</h1>
      <div>Žurnalistika ľudí - Články a slobodné diskusie bez reakcií na diskutujúcich</div>
    </header>
  )
}

export default Header

File is saved as ponents/header.js

I'm importing and using in App.jsx my all ponents

import Header from './ponents/header' import Article from './ponents/Article' import Aside from './ponents/aside'

function App() {
  // Render poment
  return (
    <main className="container">
      <Header />
      <Article />
      <Aside />
      <footer className="footer">&copy;2023 - Frisky Fox</footer>
    </main>
  )
}

export default App

One important thing:

If I have also footer.js in ponents the error is there. It's always on the last ponent.

My package.json

{
  "name": "nazory.sk",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.1.0"
  }
}

My vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

I have only LTS ReactJS so answer here doesn't help:

vite - create-vite got error in node version 18

Btw, I've tried using Brackets, without brackes if I had only return <footer></footer>. I've tried also using semi set to prettier, nothing helps. And always is error on the last impotent ponent. The reason why I have error on aside.js is that I haven't footer.js like ponent. If I create new ponent for footer and call id in App.js the error will in footer.js

I think that this sould be vite bug, couldn't be?

• javascript
• reactjs
• vite

Share Improve this question Follow asked Feb 15, 2023 at 13:54 Bambi BunnyBambi Bunny 1,43833 gold badges1313 silver badges2121 bronze badges 2

• 1 Could you rename the file extensions from .js to .jsx, the error seems to be about that! – YHR Commented Feb 15, 2023 at 13:57
• 1 Yes. It's working, sorry. But I must rename every ponent. Not only the one :) Thank you sou much – Bambi Bunny Commented Feb 15, 2023 at 13:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You have 2 options

first one is what YHR said but the problem is as you said to change all files extenstion

the second solution is to just add this config to your vite.config.js

 defineConfig({
  esbuild: {
    loader: 'jsx',
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
  ...

as it shows, it just telling vite loader to consider js as jsx

For what its worth I had that error display recently for three different files, two ponents and one custom hook. My project is a React TypeScript and was going through a conversion from react-scrips to vite.

It took me a couple of days to figure out that one import used in only these three files and no other was the culprit and it hadn't been converted from JS to TS. I am wondering if Vite import syntax analysis has an issue with JS files imported into TS files.

I hope this helps anyone having the same issue.