React vite-express выдал ошибка caught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.

Question

React vite-express выдал ошибка caught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.

Александр Новиков Ученик (21), на голосовании 1 год назад

Код сервера:

 const express = require("express"); 
const path = require('path'); 
const ViteExpress = require("vite-express"); 
const app = express(); 
const port = 3000; 
 
app.get("/hello", (req, res) => { 
  res.sendFile(path.join(__dirname, '../../public', 'index.html')); 
}); 
 
app.get('/', 
  (req, res) => { 
    res.send("Hello Vite + React!"); 
  } 
) 
 
ViteExpress.listen(app, port, () => 
  console.log(`Server is listening on http://localhost:${port}`) 
);

package.json:

 { 
  "name": "vite-react-starter", 
  "private": true, 
  "version": "0.0.0", 
  "scripts": { 
    "dev": "nodemon src/server/main.js -w src/server", 
    "start": "NODE_ENV=production node src/server/main.js", 
    "build": "vite build" 
  }, 
  "dependencies": { 
    "concurrently": "^8.2.0", 
    "express": "^4.18.2", 
    "react": "^18.2.0", 
    "react-dom": "^18.2.0", 
    "vite-express": "*" 
  }, 
  "devDependencies": { 
    "@types/react": "^18.0.26", 
    "@types/react-dom": "^18.0.10", 
    "@vitejs/plugin-react": "^4.0.1", 
    "nodemon": "^2.0.22", 
    "vite": "^4.0.4" 
  } 
}

App.jsx:

 /* @jsxRuntime classic */ 
import { useState } from "react"; 
import React from "react"; 
 
function App() { 
  const [count, setCount] = useState(0); 
 
  return ( 
     
      ad
 
    
 
  ); 
} 
 
export default App;

main.jsx

 import React from "react"; 
import ReactDOM from "react-dom/client"; 
import App from "./App"; 
 
ReactDOM.createRoot(document.getElementById("root")).render( 
   
     
   
);

Все библиотеки были обновлены, но это не помогло решению проблемы

Answer 1

Ошибка, которую вы получаете, указывает на проблему с обнаружением преамбулы (preamble) плагином @vitejs/plugin-react. Преамбула - это специальный комментарий в начале файла, который помогает определить тип JSX-синтаксиса в файле.

Попробуйте следующие рекомендации для решения проблемы:

1.Установите более новую версию плагина @vitejs/plugin-react в файле package.json. Вышеуказанный файл package.json указывает на версию ^4.0.1. Попробуйте установить более новую версию плагина, например, ^5.0.0:
"devDependencies": {
"@vitejs/plugin-react": "^5.0.0"
}
После обновления версии плагина выполните команду npm install для установки обновленных зависимостей.

2.Убедитесь, что ваши файлы JSX имеют расширение .jsx. Проверьте, что ваш файл App.jsx действительно имеет расширение .jsx.

3.Проверьте, не переименовывали ли вы файл App.js в App.jsx, но забыли обновить импорт в main.jsx. Убедитесь, что импорт import App from "./App"; в файле main.jsx указывает на правильный путь к файлу App.jsx.

3.Проверьте, что вы используете подходящую версию React и ReactDOM. У вас указаны версии "^18.2.0" для React и React DOM в файле package.json. Убедитесь, что эти версии совместимы с вашей версией @vitejs/plugin-react. Если нет, попробуйте установить совместимые версии.

5.Перезапустите сервер разработки. Иногда после обновления зависимостей или изменений конфигурации требуется перезапустить сервер разработки, чтобы изменения вступили в силу.

Если ни одно из вышеперечисленного не помогло, проверьте другие проблемы, такие как наличие других конфликтующих плагинов или некорректная конфигурация проекта. Если проблема сохраняется, попробуйте создать новый проект с помощью create-vite и повторите шаги для интеграции Express и React с Vite с нуля.

Также обратите внимание, что наличие ошибок синтаксиса или других проблем в других частях вашего кода также может вызывать ошибку "Something is wrong".