Laravel上のReactでnpm run devをするとエラーが発生 の変更点
#author("2025-03-12T14:36:43+09:00","default:pitablog","pitablog")
#author("2025-03-12T14:37:42+09:00","default:pitablog","pitablog")
* Laravel上のReactでnpm run devをするとエラーが発生 [#c2dcce8d]
#splitbody{{
LEFT:
&tag(情報技術,Laravel,npm,Node.js,React);
#split
RIGHT:&size(13){投稿日: 2025-03-12 (水)};
}}
#bcontents
** はじめに [#m6711e98]
DockerコンテナのPHP上でLaravelを動かしてBreezeでReactを導入した。
ところがERR_ADDRESS_INVALIDやERR_EMPTY_RESPONSEが発生した。
vite.config.jsにてhost: '0.0.0.0',を指定するとERR_ADDRESS_INVALIDが解決する代わりにERR_EMPTY_RESPONSEが発生する。そのためhmr.hostを変更するとよさそう
*** 環境 [#s90d170c]
- Windows 11 23H2
- Docker 27.5.1 (コンテナ)
- Nginx (Webサーバー)
- Laravel 12.1.1 (フレームワーク)
- VITE v6.2.1 (フロントエンドビルドツール)
- Node.js v20.9.0
- PHP 8.3.17
- Composer 2.8.6
- npm 10.1.0
** vite.config.js [#ke11d43b]
vite.config.jsを以下のように変更すると解決した
#gcode(jsx){{
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.jsx',
refresh: true,
}),
react(),
],
// 追加部分
server: {
host: '0.0.0.0',
hmr: {
host: 'localhost',
clientPort: 5173,
},
},
// ここまで
});
}}
** コメント [#e1eae827]
#pctrlcmt
&size(10){キーワード: 情報技術, Docker, コンテナ, React, リアクト, Laravel, PHP, プログラミング, Node.js, npm, ウェブ開発, web, バグ, エラー, ローカルホスト};
![[PukiWiki]](./skin/logo.png "[PukiWiki]"){kind=logo}
