`Crbug/1173575` 非JSモジュールファイル廃止エラーと接続拒否の解決法

問題の概要

Visual Studio Codeでデバッグ実行（F5またはCtrl+F5）時に、以下の問題が発生する場合があります：

Chromeブラウザで「サイトにアクセスできません」「err_connection_refused」が表示される
コンソールに「Crbug/1173575, non-JS module files deprecated. chromewebdata/(index)꞉5305:9:5551」というエラーが表示される
ターミナルで ng s -o や npm start は正常に動作するが、デバッグができない

このエラーメッセージは誤解を招きやすいですが、実際にはChromeや非推奨機能に関する問題ではなく、接続の問題が根本原因であることがほとんどです。

主な原因と解決策

1. ポート番号の不一致

最も一般的な原因は、デバッグ設定のポート番号と実際のアプリケーションが実行されているポート番号が一致していないことです。

launch.json 修正例

json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200", // 実際のポート番号に変更
            "webRoot": "${workspaceFolder}"
        }
    ]
}

確認ポイント：

Angularアプリは通常ポート4200で実行
Reactアプリは通常ポート3000で実行
実際に使用されているポートを確認して launch.json を更新

2. サーバーが起動していない

デバッガーはサーバーを自動起動しないため、事前にアプリケーションサーバーを起動する必要があります。

解決方法：

別のターミナルで npm start または ng serve を実行
または tasks.json を使用して自動起動を設定

tasks.json 設定例

json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "start-server",
            "type": "npm",
            "script": "start",
            "isBackground": true,
            "problemMatcher": {
                "owner": "typescript",
                "pattern": "$tsc",
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": ".*",
                    "endsPattern": "Compiled|Failed to compile."
                }
            }
        }
    ]
}

json

{
    "preLaunchTask": "start-server" // tasks.jsonのlabel名と一致させる
}

3. ネットワーク設定の問題

ネットワーク関連の設定が原因で接続できない場合があります。

確認すべきポイント：

ChromeデベロッパーツールのNetworkタブで「No throttling」が選択されているか確認
オフラインモードになっていないか確認
VPNが接続されている場合は一度切断して試す
ブラウザのキャッシュをクリアする
アドブロッカーや拡張機能を一時的に無効化する

4. ホストファイルの問題

Windowsの場合、hostsファイルが変更されている可能性があります。

確認方法：

C:/Windows/System32/drivers/etc/hosts を開く
localhost関連のエントリが正しく設定されているか確認
必要に応じて修正（管理者権限が必要）

5. フレームワーク固有の問題

使用しているフレームワークに特有の問題が原因の場合もあります。

React/Next.jsの場合

既に別のサーバーインスタンスが実行されていないか確認
環境変数ファイル（.env）の設定を確認

Angularの場合

.vscode フォルダを削除して再設定
Angular CLIデバッグレシピを確認: 公式ガイド

Blazorの場合

ボタンのtype属性が「submit」ではなく「button」になっているか確認
プロジェクト間の参照関係を確認

Flutterの場合

Visual Studio Codeの設定で --no-sound-null-safety 引数が指定されていないか確認

詳細なトラブルシューティング手順

ステップバイステップでの問題切り分け

基本確認
- ターミナルで手動実行 (npm start, ng serveなど) ができるか確認
- ブラウザで直接 http://localhost:ポート番号 にアクセスできるか確認
デバッグ設定確認
- launch.json のポート番号が実際のアプリケーションポートと一致しているか確認
- webRoot パスが正しいか確認
ネットワーク確認
- ファイアウォール設定を確認
- 他のブラウザ（Firefoxなど）で試す
- ネットワーク設定をリセット
プロジェクト設定確認
- 必要な依存パッケージがすべてインストールされているか確認 (npm install)
- 環境変数設定を確認
- 最近の変更点をレビュー

予防策とベストプラクティス

デバッグ設定の標準化
- チーム全体で統一した launch.json と tasks.json を使用
- ポート番号をプロジェクトで統一する
ドキュメント化
- プロジェクトのREADMEにデバッグ手順を明記
- 常見問題と解決策を共有
定期確認
- 定期的にデバッグ環境をテスト
- Visual Studio Codeと関連拡張機能を最新版に保つ

重要

「Crbug/1173575」エラーは単なる接続問題の表面的な症状です。根本原因を見極めるために、ネットワーク接続、ポート設定、サーバー起動状態を確認してください。

まとめ

Crbug/1173575, non-JS module files deprecated エラーは様々な要因で発生しますが、ほとんどの場合は以下のいずれかです：

ポート番号の不一致
サーバーが起動していない
ネットワーク設定の問題
ブラウザの拡張機能やキャッシュの問題

体系的なトラブルシューティングで問題を切り分け、確実にデバッグ環境を構築しましょう。

関連記事

Crbug/1173575 非JSモジュールファイル廃止エラーと接続拒否の解決法 ​

問題の概要 ​

主な原因と解決策 ​

1. ポート番号の不一致 ​

2. サーバーが起動していない ​

3. ネットワーク設定の問題 ​

4. ホストファイルの問題 ​

5. フレームワーク固有の問題 ​

React/Next.jsの場合 ​

Angularの場合 ​

Blazorの場合 ​

Flutterの場合 ​

詳細なトラブルシューティング手順 ​

ステップバイステップでの問題切り分け ​

予防策とベストプラクティス ​

まとめ ​

`Crbug/1173575` 非JSモジュールファイル廃止エラーと接続拒否の解決法

問題の概要

主な原因と解決策

1. ポート番号の不一致

2. サーバーが起動していない

3. ネットワーク設定の問題

4. ホストファイルの問題

5. フレームワーク固有の問題

React/Next.jsの場合

Angularの場合

Blazorの場合

Flutterの場合

詳細なトラブルシューティング手順

ステップバイステップでの問題切り分け

予防策とベストプラクティス

まとめ