Webpack Dev Server の Invalid options object エラー解決方法
問題概要
React アプリケーションの開発サーバーを起動する際に、以下のエラーが発生することがあります：
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options.allowedHosts[0] should be a non-empty string.
error Command failed with exit code 1.このエラーは、package.json に "proxy": "http://localhost:6000" のようなプロキシ設定を追加した際に発生することが多く、プロキシ設定を削除すると問題が解消される傾向があります。
根本原因
この問題の主な原因はいくつかあります：
Node.js バージョン18の変更点
Node.js v18.0.0 で os.networkInterfaces() の family プロパティが数値型に変更されたことで、react-scripts が使用する address モジュールとの互換性問題が発生します。
ネットワーク設定の問題
一部のネットワーク環境（特にVPN使用時や特定の企業ネットワーク）では、IPv4アドレスの検出に失敗し、allowedHosts が未定義になる場合があります。
Webpack Dev Server の仕様変更
Create React App のバージョンアップに伴い、Webpack Dev Server の設定方法が変更され、従来のプロキシ設定方法と互換性がなくなる場合があります。
解決方法
方法1: 環境変数を使用する（推奨）
プロジェクトのルートディレクトリに .env ファイルを作成し、以下の設定を追加します：
DANGEROUSLY_DISABLE_HOST_CHECK=true注意
この設定は開発環境のみで使用し、本番環境では絶対に使用しないでください。セキュリティリスクがあります。
方法2: Node.js のバージョンを変更する
Node.js のバージョン18で問題が発生する場合、バージョン16または17にダウングレードします：
# nを使用する場合
sudo n 16.15.0
# nvmを使用する場合
nvm install 16.15.0
nvm use 16.15.0方法3: http-proxy-middleware を使用する
- パッケージをインストール：
npm install http-proxy-middleware --save-devsrc/setupProxy.jsファイルを作成：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:6000',
changeOrigin: true,
})
);
};package.jsonから"proxy"設定を削除
方法4: キャッシュのクリアと再インストール
# node_modules と package-lock.json を削除
rm -rf node_modules package-lock.json
# キャッシュをクリア
npm cache clean --force
# 依存関係を再インストール
npm install方法5: react-scripts のバージョン調整
package.json で react-scripts のバージョンを変更：
{
"react-scripts": "4.0.3"
}ネットワーク関連の対策
VPNの接続/切断を試す
VPNを使用している場合、接続状態を変更すると問題が解決することがあります。
バックエンドサーバーの起動確認
プロキシ先のバックエンドサーバー（例：http://localhost:6000）が実際に起動していることを確認してください。
最新のWebpack Dev Server設定
Webpack Dev Server v5以降では、設定方法が変更されています。カスタム設定が必要な場合は、webpack.config.js で明示的に設定します：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:6000',
changeOrigin: true,
secure: false
}
},
allowedHosts: ['localhost', '.localhost']
}
};まとめ
最も安全で推奨される解決方法は、方法1の環境変数設定または方法3のhttp-proxy-middlewareを使用した明示的なプロキシ設定です。Node.jsのバージョン管理に注意し、セキュリティリスクのある設定は開発環境でのみ使用するようにしてください。
情報
Create React Appの公式ドキュメントでは、複雑なプロキシ設定が必要な場合にhttp-proxy-middlewareの使用を推奨しています。
問題が解決しない場合は、ネットワーク環境の確認や、使用しているツール（VPNなど）の影響を考慮してください。