【Laravel/React】Laravel10に、React19導入

# 概要：

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

# Laravel10から、React導入まで：

### 1. 前提

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

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

```powershell: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を用意します。

```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


```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エントリポイントを作成します。

```js: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 />);
```

ルート設定をします。

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


### 6. Viteを実行

```powershell:powershell
npm run dev
```


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






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


```html:reactapp.blade.php
    @viteReactRefresh
```

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

```log: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」を追記して解決。



# 参考にしたページ：

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


If you are using Laravel.

Simply add

> @viteReactRefresh

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


```html:
 <!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>
```