MENU

Failed to load resource: the server responded with a status of 404 (Not Found)で詰まった話し

TypeScriptのキャッチアップをしている時にFailed to load resource: the server responded with a status of 404 (Not Found)というエラーにはまったので備忘録として残しておく。

解決策の結論からいくとimport文の拡張子を省略していることだった。
vscodeの拡張機能live serverなどでデバックする際は拡張子が必要らしい。

目次

環境

  • OS:windows11
  • エディタ:VScode
  • デバック環境:Open With Live Server

発生状況

tscコマンドで.tsファイルをコンパイルしてからindex.htmlをLive Serverで実行。

F12で開発者モード開いてconsole確認すると該当のエラーが発生しました。

中身は適当だけどこんな感じの内容

tsconfig.json

screen.ts

app.ts

フォルダ構成

エラー内容

Failed to load resource: the server responded with a status of 404 (Not Found)

これだけ見ると指定したpath上にファイルが見つからなかったと思って
pathを確認すると思うんですけど、そもそも自動補完でimportしてるから間違いなはずがない。

修正内容

import Screen from "./class/screen.js";

こんな感じで.jsの拡張子を追加

tsc --build --clear

で一回jsファイル削除して

tsc

で再コンパイル

TypeScriptでは通常、拡張子を省略できるが、ブラウザで直接実行する場合は必要らしい。

その他のエラーの可能性

一応他にも同エラーの原因になりうる可能性を備忘録として残しておく

  • CORS問題
    ローカルファイルをブラウザで直接開いている場合、CORS(クロスオリジンリソース共有)の問題が発生する可能性ある。この場合、ローカルサーバー(例:Live Server)を使用してファイルを提供する。

    index.html:1 Access to script at 'file:///[あなたのパス]/develop/dist/app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted
  • キャッシュ
    ブラウザにキャッシュが残っている可能性があるのでブラウザのキャッシュをクリア
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次