動的に読み込むJavaScriptの実行が完了したタイミングで処理をしたい

Question

前提

他の方による次の質問の回答を参考にしています。
「外部からjsで動的にCDNからjsファイルを読み込む方法について」
https://teratail.com/questions/pi49k2t5q4p48y

仕様上の都合により、PHPなどのサーバーサイドの処理を使わず、JavaScriptで完結したいです。（jQuery等を使うのは構いません）

発生している問題・エラーメッセージ

(index):13 Uncaught (in promise) ReferenceError: message is not defined
    at (index):13:15

該当のソースコード

const message = 'release mode'

const message = 'debug mode'

<script>
window.addEventListener('load',async()=>{
  const mode = 'debug'
  let src = 'release.js';
  if (mode == 'debug') {
    src = 'debug.js'
  }
  const script=Object.assign(document.createElement('script'),{
  src:window.URL.createObjectURL(new Blob([await fetch(src).then(res=>res.text())]))
  });
  document.head.insertBefore(script,document.head.querySelector('script'));
  //await (async (ms) => new Promise(resolve => setTimeout(resolve, ms)))(1000)
  console.log(message) // ここでエラーが発生
});
</script>
<button onclick="console.log(message)">click</button>

試したこと

1.ボタンをクリックする。
2.console.log() の上のコメントを解除して1秒待つ。

どちらでも「debug mode」と正常に出力されるので、読み込むJavaScriptが実行される前にconsole.log()が実行されるのが原因だと思われます。

ボタンクリックのようにユーザーの操作を待つのは論外として、動的に読み込みたいJavaScriptが多数あるため一定時間待つ方法も避けたいです。

補足情報（FW/ツールのバージョンなど）

Windows10 Pro
Chrome 108.0.5359.126

Comments

[m.ts10806]

必ず利用する変数名なら、いっそ呼び出し元のグローバル変数として定義しておくなど回避は可能かもしれませんが、非同期になっていることも一端ではないかなと。
＞ async()

手書きとかで良いのでいったん流れを整理されたほうが良いかもしれません（あくまで確認のためこちらでコメントしました）

[gosaro]

早速のコメントありがとうございます。

グローバル変数というのは上記の例だと message のことでしょうか。
グローバル変数にして適当な初期値を設定しておけば message is not defined は回避することができますが、期待している 'debug message' は出力されません。

また、イベントリスナは非同期ですが、リスナ内の処理は同期的に行っているので、関係ないはずです。

[m.ts10806]

了解です
処理の全体像が見えなかったための確認でした

Answer 1

window.addEventListener('DOMContentLoaded',async()=>{
  const mode = 'debug';
  let src = 'release.js';
  if (mode == 'debug') {
    src = 'debug.js';
  }
  const script=Object.assign(document.createElement('script'),{src});
  document.head.appendChild(script);
  await new Promise(resolve=>{
    script.addEventListener('load',resolve);
  });
  console.log(message);
});

Comments

[gosaro]

できました。ありがとうございました。

[gosaro]

万一リスナを仕掛ける前にロードが完了してしまうとawaitで止まってしまうと思いますので、念のため次のようにしようと思います。

:
const script=Object.assign(document.createElement('script'),{src});
const promise = new Promise(resolve=>{
script.addEventListener('load',resolve);
});
document.head.appendChild(script);
await promise;
console.log(message);