初めに
業務で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への記述があります。
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 の方が上手く動作しないことが問題になっています。
解決コード
<!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さん情報のご提供ありがとうございました🙇♂️
また何か進捗があり次第、更新します。
それではまたいつか！