# webpackでTop-Level Awaitを使用して、一番上位でもawaitを使えるようにする方法

URL: https://webrandum.net/webpack-top-level-await/
公開日: 2022-08-03
更新日: 2022-08-03
カテゴリー: コーディング
出典: Webrandum（著者: サイトウ マサカズ）

いままで非同期処理をするときに`await`を使用したい場合、`async`内でしか使えませんでした。

そのため、`await`を速実行したい場合は`async`の無名関数を作ってその中で実行していました。

```
(async() => {
  // ここでawaitを使用する
})();

// 関数外だと、awaitは使えない
```

しかし、Top-Level Awaitはその名前の通り、一番上位に限り`await`が使えるようになります（関数内の場合は`async`を付けていないと実行できません）。

webpackを使った環境で、このTop-Level Awaitを有効化する必要が出てきたので、方法を備忘録として残しておきます。

## webpack.config.jsへの記述

「webpack.config.js」ファイル内にTop-Level Awaitを有効化する記述を追加します。

```
module.exports = {
  module: {
    rules: [
      {
        // 省略
      },
    ],
  },
  experiments: {
    topLevelAwait: true,
  },
  plugins: [],
};
```

対象となる記述は「experiments」内に「topLevelAwait」を追加して、`true`にすると有効化されます。

```
experiments: {
  topLevelAwait: true,
},
```

### webpack.mix.js

Laravel Mixを使っている場合は、設定ファイルが「webpack.mix.js」になります。

その場合も同じように「experiments」内に「topLevelAwait」を追加すれば反映されます。

```
mix.webpackConfig({
  resolve: {
    alias: {
      '@': __dirname + '/resources/js/src'
    }
  },
  experiments: {
    topLevelAwait: true,
  },
});
```

## 有効化せずに使った場合のエラー表示

もし、Top-Level Awaitを有効化せずに使った場合は下記のようなエラーが表示されます。

```
Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
```

有効化したにもかかわらず、このエラーメッセージが表示される場合は、設定方法を間違えているので対象のファイルを確認しましょう。