「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に記載されていました。

vitejs/vite

Next generation frontend tooling. It's fast! Contribute to vitejs/vite development by creating an account on GitHub.

https://github.com/vitejs/vite

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を導入するあたりエラーが発生したため、この記事を書きました。
参考になれば幸いです。