※当ブログの記事にはアフィリエイトリンクを使用している場合があります。
目次
前提
CakePHPとVite+Reactを統合する際に、エラーとなった箇所があったため書き残します。
CakePHPとReactの統合はViteHelper plugin for CakePHPを使用しました。
この方法はVite公式にも記載されている推奨の方法になります。
バージョン情報
- CakePHP 4.3
- Vite 5.1
- React 18.2
エラー内容
ViteHelper plugin for CakePHPの手順通りに設定を行うと、ブラウザのコンソールに以下のエラーが表示されました。
修正方法
fetchを行っている箇所の前（手順通りに構築している場合はレイアウトファイル）に以下を追加します。
補足
今回のエラーと修正方法は以下のIssueに記載されていました。
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を導入するあたりエラーが発生したため、この記事を書きました。
参考になれば幸いです。
