Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

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}`)
);
main.jsx:
 import React from "react"; 
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(



);
проблемный файл(App.jsx):
 /* @jsxRuntime classic */ 
import { useState } from "react";
import React from "react";

function App() {
const [count, setCount] = useState(0);

return (
<>

ad



);
}

export default App;
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",
"global": "^4.4.0",
"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"
}
}
Дополнен 1 год назад
все библиотеки устанавливал пару часов назад
Голосование за лучший ответ
OKKSI⭐ Профи (916) 1 год назад
Ошибку "caught Error: @vitejs/plugin-react can't detect preamble. Something is wrong." можно исправить, обновив зависимости в package.json, чтобы они соответствовали последней версии React и Vite.

В вашем случае, следующие зависимости требуют обновления:

В package.json обновите версии зависимостей "react" и "react-dom" на "18.2.0".

Удалите зависимость "global", так как она не нужна для работы с React и Vite.

Установите точные версии зависимостей для "@types/react" и "@types/react-dom" соответствующие версии "react" и "react-dom". Например, "@types/react": "^18.0.26" и "@types/react-dom": "^18.0.10".

Обновите версию "@vitejs/plugin-react" на "^4.0.1".

Запустите команду npm install или yarn install, чтобы установить обновленные зависимости.

После выполнения этих шагов, попробуйте перезапустить сервер и сборку проекта. Ошибка должна быть исправлена, и ваше приложение должно работать без проблем.
Александр НовиковУченик (21) 1 год назад
Попробовал сделать всё, как вы сказали, но ошибка не исчезла
Александр Новиков, Это не он сказал а нейросеть...
Poetiq Мастер (2117) 11 месяцев назад
Если используете шаблонизатор blade добавьте в него:

@viteReactRefresh
Limon__23Знаток (256) 11 месяцев назад
Помогло!
Limon__23Знаток (256) 11 месяцев назад
Спасибо)
Похожие вопросы