「vite-plugin-react can't detect preamble.」エラー対応【PHP、React】

前提

CakePHPとVite+Reactを統合する際に、エラーとなった箇所があったため書き残します。 CakePHPとReactの統合はViteHelper plugin for CakePHPを使用しました。

GitHub - brandcom/cakephp-vite: ViteHelper plugin for CakePHP and Vite JS

ViteHelper plugin for CakePHP and Vite JS. Contribute to brandcom/cakephp-vite development by creating an account on GitHub.

https://github.com/brandcom/cakephp-vite

この方法はVite公式にも記載されている推奨の方法になります。

バックエンドとの統合

次世代フロントエンドツール

https://vite.dev

バージョン情報

• CakePHP 4.3
• Vite 5.1
• React 18.2

エラー内容

ViteHelper plugin for CakePHPの手順通りに設定を行うと、ブラウザのコンソールに以下のエラーが表示されました。

修正方法

fetchを行っている箇所の前（手順通りに構築している場合はレイアウトファイル）に以下を追加します。

補足

今回のエラーと修正方法は以下のIssueに記載されていました。

"vite-plugin-react can't detect preamble. Something is wrong." when using styled-components · Issue #1984 · vitejs/vite

Describe the bug When I'm rendering a styled component, I get the following error: "Uncaught Error: vite-plugin-react can't detect preamble. Something is wrong. See vitejs/vite-plugin-react#11 (com...

https://github.com/vitejs/vite/issues/1984

Viteの開発者であるEvan Youさんが、以下のようにコメントをしています。（Google翻訳済み、一部省略）

PHP サーバー経由で HTML を提供しているのですね。 残念ながら、Vite プラグイン (この場合は@vitejs/plugin-react-refresh) は HTML の変更を挿入できません。 Node.js を使用していないため、Vite のプログラム API を利用して HTML 変更を挿入することはできません。 これ自体はバグではありませんが、改善する方法を検討する必要があります。

PHPサーバ経由でHTMLを提供している場合、HTMLの変更ができないためエラーが発生するようです。 私の場合はCakePHPとReactでしたが、他のPHP環境（Laravel等）や他のJavaScript環境（Vue等）でも同じエラーが発生するかもしれません。

まとめ

CakePHPにViteを導入するあたりエラーが発生したため、この記事を書きました。 参考になれば幸いです。