Ошибка анализа импорта ReactJS 18 и vite 4 в npm run dev

пожалуйста, у меня проблема с Vite сервером и ReactJS

Версия ReactJS:

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

У меня возникает проблема с анализом импорта. Ошибка:

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/components/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)

Из этого компонента

import React from 'react'

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

export default Aside

Файл называется 'components/aside.js'

Но, например, мой заголовок в порядке, и он абсолютно такой же

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

Файл сохранен как components/header.js

Я импортирую и использую в App.jsx все свои компоненты

импортировать заголовок из './components/header' импортировать статью из './components/Article' импорт Помимо './components/aside'

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

export default App

Одна важная вещь:

Если у меня также есть footer.js в компонентах, ошибка есть. Он всегда находится на последнем компоненте.

Мой пакет.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"
  }
}

Мой vite.config.js

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

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

У меня есть только LTS ReactJS, поэтому ответ здесь не помогает:

vite - при создании-приглашении возникла ошибка в версии узла 18

Кстати, я пробовал использовать скобки, без скобок, если бы у меня были только return <footer></footer>. Я пробовал также использовать полунабор для более красивого, ничего не помогает. И всегда ошибка на последнем импотентном компоненте. Причина, по которой у меня есть ошибка aside.js, заключается в том, что мне не нравится компонент footer.js. Если я создам новый компонент для нижнего колонтитула и вызову идентификатор в App.js, ошибка будет в footer.js

Я думаю, что это должно быть ошибкой, не может быть?

🤔 А знаете ли вы, что...
JavaScript поддерживает работу с графикой и аудио, что позволяет создавать мультимедийные веб-приложения.


56
1

Ответ:

Решено

У вас есть 2 варианта

первый - это то, что сказал YHR, но проблема в том, как вы сказали, изменить расширение всех файлов

второе решение - просто добавить эту конфигурацию в ваш vite.config.js

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

как видно, он просто говорит загрузчику vite рассматривать js как jsx