пожалуйста, у меня проблема с 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">©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 поддерживает работу с графикой и аудио, что позволяет создавать мультимедийные веб-приложения.
У вас есть 2 варианта
первый - это то, что сказал YHR, но проблема в том, как вы сказали, изменить расширение всех файлов
второе решение - просто добавить эту конфигурацию в ваш vite.config.js
defineConfig({
esbuild: {
loader: 'jsx',
},
optimizeDeps: {
esbuildOptions: {
loader: {
'.js': 'jsx',
},
},
},
...
как видно, он просто говорит загрузчику vite рассматривать js как jsx