typescriptのコンパイルをwebpack経由でコンパイルを試しているときにエラーが発生。
発生エラーと対処内容が順番を追ってのものとなりました。
##環境
・ローカル環境で動作確認。
・webpack5系
typscriptで書いたコードをwebpackでjsにコンパイルし、そのコンパイル後のjsファイルをindex.htmlで読み込んでいます。
で、読み込んでいるhtmlファイルのコンソールに出たエラーと対処方法です。
##発生エラー1
SyntaxError: import declarations may only appear at top level of a module
モジュールではimportはトップレベルで宣言してね、というもの
コンパイル後のjsファイルでも最初に宣言していたのですが。。
少し調べてみるとそもそものhtmlから、スクリプトファイルを読み込むtypeにmoduleを指定している必要があったようです。
こちらを参考に
<script type="module" src="./index.js"></script>
と指定。
すると、今度は下記のエラーとなりました。
##発生エラー2
クロスオリジン要求をブロックしました:
同一生成元ポリシーにより、file:///Users/xxxx/プロジェクトフォルダ/dist/index.js
にあるリモートリソースの読み込みは拒否されます (理由: CORS 要求が http でない)。
これはいろいろ調べていると、
ローカル環境でもサーバー起動上での動作ではない場合、クロスオリジン要求になってしまうみたいですね。。。
ここ最近のブラウザにセキュリティ対策の高まりによるものっぽい。
参考：https://qiita.com/terufumi1122/items/39b2a3659bc585c07f64
ということでwebpack-live-serverでローカルサーバを起動し正常に読み込めました。