vincent15000's avatar

I start learning React with Laravel and I get an error

Hello,

I start learning React and I'm trying to add it to Laravel.

I don't want to use a starter kit, I want to install it manually to understand how it works.

With VueJS, I have no problem to add it manually, but with React, I don't know what happens.

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Delicious</title>

        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
            @vite(['resources/css/app.css', 'resources/js/app.jsx'])
        @endif

        @viteReactRefresh
    </head>

    <body>
        <div id="delicious"></div>
    </body>
</html>
// app.jsx
import './bootstrap';

import { createRoot } from 'react-dom/client';  
import App from '@/App';

createRoot(document.getElementById('delicious')).render(<App />);
// App.jsx
import {
    BrowserRouter,
    Routes,
    Route,
  } from 'react-router-dom';
import Home from '@/pages/Home';

export default function App () {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
            </Routes>
        </BrowserRouter>
    );
};

I get this error.

Home.jsx:3 Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.

Can you help me ?

Thanks ;).

V

0 likes
3 replies
vincent15000's avatar
vincent15000
OP
Best Answer
Level 63

@Tray2 I jsut solved the problem.

I need to have @viteReactRefresh before @vite.

1 like

Please or to participate in this conversation.