概要：

Laravel10にて、開発をしている際に、フロントエンドのReact化をしたときに、「Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.」エラーが発生して詰まったので、備忘録です。

Laravel10から、React導入まで：

1. 前提

Laravel10で構築されている
viteが導入されている

2. viteに、Reactプラグインをインストール

powershell

npm install react react-dom
npm install @vitejs/plugin-react

nodeの依存関係の問題があったとき
- nodeのリフレッシュインストールを実施
- プロジェクトの「node_modules」「package-lock.json」を削除して「npm install」を実施する

3. viteに、React エントリポイントを設定

ReactコンポーネントをレンダリングするためのHTMLを用意します。

reactapp.blade.php

<!-- resources\views\layouts\reactapp.blade.php -->
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title') | React Application</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <link rel="icon" href="{{ asset('image/sample.ico') }}">
    @viteReactRefresh
    @vite('resources/js/app.jsx')
</head>

<body>
    <div id="app"></div> <!-- Reactマウントポイント -->
    <script type="module" src="/resources/js/app.jsx"></script>
</body>

</html>

4. Viteの設定を更新 vite.config.js

vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        react(), // Reactのプラグインを追加
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        },
    },
    server: {
        hmr: {
            overlay: false, // エラーオーバーレイを無効化
        },
    },
});

5. Reactエントリポイントの作成

resources/js/app.jsx にReactエントリポイントを作成します。

resources/js/app.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';

const App = () => {
    return (
        <div>
            <h1>React Application</h1>
            <p>React is successfully integrated with Laravel!</p>
        </div>
    );
};

ReactDOM.createRoot(document.getElementById('app')).render(<App />);

ルート設定をします。

web.php

Route::get('/react', function () {
    return view('layouts.reactapp');
});
// http://127.0.0.1:8000/react

6. Viteを実行

powershell

npm run dev

http://127.0.0.1:8000/react
へアクセス

詰まったところと、最終的な解決：

reactapp.blade.php

    @viteReactRefresh

の記載がないと、ページが真っ白で、コンソールに以下のエラーとなった。

console.log

https://stackoverflow.com/questions/76854172/vitest-error-react-refresh-preamble-was-not-loaded-something-is-wrong

resources\views\layouts\reactapp.blade.php
に、「@viteReactRefresh」を追記して解決。

参考にしたページ：

If you are using Laravel.

Simply add

@viteReactRefresh

into the HTML head in your Laravel blade file(app.blade.php/welcome.blade.php)

 <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Laravel</title>
            @viteReactRefresh 
            @vite(['resources/css/app.css', 'resources/js/Website/app.jsx'])
            @inertiaHead
        </head>
        <body>
            @inertia
        </body>
    </html>