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
1 2 3 4 5 6 7 8 9 10 11 |
{ "compilerOptions": { "target": "es2022", "module": "es2022", "rootDir": "./src", "outDir": "./dist", "forceConsistentCasingInFileNames": true, "strict": true, "noUnusedParameters": true } } |
screen.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/** * スクリーンクラス */ export default class Screen { /** * 画面横幅取得 * @returns 画面横幅 */ static get Width(): number { return document.body.clientWidth; } /** * 画面縦幅取得 * @returns 画面縦幅 */ static get Height(): number { return document.body.clientHeight; } } |
app.ts
1 2 3 4 5 |
import Screen from "./class/screen"; console.log(Screen.Width); console.log(Screen.Height); |
フォルダ構成
エラー内容
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
- キャッシュ
ブラウザにキャッシュが残っている可能性があるのでブラウザのキャッシュをクリア
コメント