Laravel10にReactを導入しようとして詰まったので備忘録（Vite使用）

初めに

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

参考にしたサイト

以下の記事を参考に、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」なんて、かなりの初学者殺しエラーメッセージで困りました

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

結論から言うと…

問題のあった部分

先ほど紹介した参考記事の中に、以下のような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 をインポートして、接続の設定を行っているファイルなのですが、これを以下のように変更することで解決しました。

解決コード

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

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

お分かりいただけただろうか…
なんと、 @vitejs/plugin-react をインポートしたことでエラーが発生していたようです。。。

エラーの原因が分かった今でも、「そんなことあるの？」と若干の混乱状態です

何故 import が原因に?

ここからは自身の仮説をchatGPTに投げて、それをまとめた結果ですので、正しい理由かどうかは分かりません。
私も納得はしていないので、もし別の箇所に原因があるかも知れないと感じられたら、ぜひ教えていただきたいです！

理由の考察

Reactをlaravelで導入する際に、ターミナルに以下のコマンドを入力します。

npm

npm install @vitejs/plugin-react --save-dev

こうすることで、 @vitejs/plugin-react がlaravelにインストールされ、package.json が以下のように更新されます。

package.json

    "devDependencies": {
        "@vitejs/plugin-react": "^4.2.1",  // これ
        "laravel-vite-plugin": "^0.7.8",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "sass": "^1.56.1"
    }

laravelに @vitejs/plugin-react をインストールした上で、さらに vite への設定が必要なものだとばかり思っていたのですが、どうやら前者の処理を行えば、後者は必要ない（むしろエラーが出る）ようです。。。

いや〜解せない 笑

何が解せないかって、どの記事を読んでもそんなこと書かれてないんですよね…。
私が見つけられていないだけかも知れませんが。

Uncaught Error: @vitejs/plugin-react can't detect preamble というエラーについて

今回は上記のような記述が原因で起きたエラーでしたが、どうやら他の方も同一のエラーに遭遇しているようです。
以下にリンクをまとめておきますので、同じエラーで悩んでいる方はこちらも参考にしてみてください！

それにしても、あまりメジャーではないエラーに遭遇してしまうのは何回目でしょうか。。。（常習犯）

「何かが違う」エラーに対する各人の対応

• 英語なので頑張って読んでください。私は読みました笑

• Django-vite を使ったPythonの記事ですが。

最後に

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

進捗があり次第、更新しますね。

それではまたいつか！