Laravel上のReactでnpm run devをするとエラーが発生の変更点

追加された行はこの色です。
削除された行はこの色です。
Laravel上のReactでnpm run devをするとエラーが発生へ行く。
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, バグ, エラー, ローカルホスト};

検索

↑

プロフィール

Pitan

プログラミングや音MADやらが趣味

↑

新ぴたぶろぐ

検索

プロフィール

最新のページ

最新の5件

タグ

人気のページ

人気の5件

カウンター

Laravel上のReactでnpm run devをするとエラーが発生の変更点

検索

プロフィール

最新のページ

最新の5件

タグ

人気のページ

人気の5件

カウンター

新ぴたぶろぐ

検索

プロフィール

最新のページ

最新の5件

タグ

人気のページ

人気の5件

カウンター

Laravel上のReactでnpm run devをするとエラーが発生 の変更点

検索

プロフィール

最新のページ

最新の5件

タグ

人気のページ

人気の5件

カウンター

Laravel上のReactでnpm run devをするとエラーが発生の変更点