概要：
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>