初めに

業務でlaravelにReact導入を行った際に、謎のエラーに遭遇したので備忘録です。
~~そして未だに、なぜエラーが解消されたのか理解できていないので、博識な方がいらっしゃいましたら教えていただけると嬉しいです 🙇‍♂️💦~~

2025/01/07追記：解決方法分かりましたので、ぜひ読んでいってください！

参考にしたサイト

以下の記事を参考に、LaravelへReactの導入を試みました。
とても分かりやすくまとめられていて、初学者の私でも読みやすかったです！

私の開発環境

Laravel 10
PHP 8
React 18.2.0
vite 4.5.1

発生したエラー

今回、Reactを導入する過程で以下のようなエラーに遭遇しました。

エラー

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

ぷりあんぶるが検出できない？初めましての単語すぎるけど、名前は可愛いですね笑
しかも「Something is wrong」なんて、かなりの初学者殺しエラーメッセージで困りました😇

何かが違うと突き放されたので、泣く泣くドキュメント検索の放浪旅に。。。

2025/01/07追記：
「preamble」とは、Reactのホットリロード（Hot Module Replacement: HMR）、つまり自動リロードを機能させるために必要なスクリプト。これが検出できないと、自動リロードができずにエラーになる。

→ @vitejs/plugin-react公式の「Middleware mode」を参照すると上記エラーが発生する仕組みが説明されています！
つまり、laravelに組み込まれる@vitejs/plugin-react は Middleware mode という特別なモードで動いているんですね🧐

解決方法

2025/01/07追記：
以下の解決方法は @nano5544 さんから提供いただいた情報を元に、修正しています。nanoさんありがとうございます！！

問題のあった部分

先ほど紹介した参考記事の中に、以下のようなvite.config.jsへの記述があります。

vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
         react(),
    ],
});

これはviteに laravel-vite-plugin と @vitejs/plugin-react をインポートして、接続の設定を行っているファイルなのですが、この @vitejs/plugin-react の方が上手く動作しないことが問題になっています。

解決コード

app.blade.php

<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>laravel</title>

      <!-- CSRF Token -->
      <meta name="csrf-token" content="{{ csrf_token() }}">

      <!-- Fonts -->
      <link rel="preconnect" href="https://fonts.bunny.net">
      <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

      <!-- style -->
      <link rel="stylesheet" href="{{ asset('/assets/css/commonStyle.css') }}">

      <!-- viteの埋め込み -->
+     @viteReactRefresh
      @vite(['resources/sass/app.scss', 'resources/js/app.js',])
  </head>
  <body>
    （bodyが入ります）
  </body>
</html>

問題を解決するためには、Laravelプロジェクトの全てを司るblade（app.blade.phpにしていますが、ファイル名は環境によって異なります）に、@viteReactRefresh を記述します。
これによって、Reactのホットリロードが動くようになり、ぷりあんぶる見つからない問題が解決します！

2025/01/07追記：
Laravel9のアセット構築に「React」のセットアップ方法がちゃんと載っていました。。。
@vitejs/plugin-reactプラグインのインストール後に、@viteReactRefresh Bladeディレクティブを入れろとのご教示が。（※最新のLaravel11にも記載あり）

リーダブル読んでないのバレバレですね、改心します😇

最後に

~~今のところ問題なくReactを使うことができているので、原因詮索を行うのは諦めました。引き続き開発に専念していこうと思います。~~

実は以前紹介していたコメントアウトという力業でも問題なく1年動いていたのですが、明らかに邪道なので修正しました😅
自身のプロジェクトも上記の方法で修正を行ったところ、問題なく動いています！

nanoさん情報のご提供ありがとうございました🙇‍♂️

また何か進捗があり次第、更新します。

それではまたいつか！