webpack5を用いてReactでTop level awaitを有効にした環境を作成する

最初に

create-react-appは用いず、自身でwebpackをインストールしてReact環境を作成する方法で実現する。 (というか2021.10時点ではcreate-react-appのwebpackはv5ではないので、たぶんtop level awaitを実現するにはejectなどする必要がある？)

ライブラリのインストール

必要なライブラリをインストール

yarn add -D webpack webpack-cli webpack-dev-server babel-loader @babel/core  @babel/preset-env @babel/preset-react html-webpack-plugin
yarn add react react-dom

必要なファイルの作成

次に必要なファイルを生成する。

# webpackの設定ファイルを作成
touch webpack.config.js

# src配下にアプリケーション関連のファイルを作成する
mkdir src
touch src/index.html src/index.js src/App.js

webpack.config.jsの記述

webpack.config.jsには下記のように記述する。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'index.bundle.js',
  },
  devServer: {
    port: 3000,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/react'],
            },
          },
        ],
      },
    ],
  },
  experiments: {
    topLevelAwait: true,
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

ここで下記のような記述を加えることでTop level awaitが有効になる

    experiments: {
        topLevelAwait: true
    },

アプリケーションコードの記述

さきほど作成したsrc配下の３ファイルをそれぞれ記述していく。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Top level await sample React</title>
  </head>

  <body>
    <div id="app"></div>
    <script src="index.bundle.js"></script>
  </body>
</html>

index.js

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';

ReactDom.render(<App />, document.getElementById('app'));

App.js

import React from 'react';

const text = await Promise.resolve('Hello World');

function App() {
  return (
    <div>
      <h1>{text}</h1>
    </div>
  );
}

export default App;

ソースコード

ソースコードは下記に格納した。

github.com

上で書いた以外にprettierのインストールや .gitignore などの作成を別途行っているが、top level awaitを行う際の必要最低限な記述はここまでの内容でカバーできるはず。

ちなみに webpack.config.js内の Top level awaitに関する記述を削除して yarn dev でアクセスすると、下記のようなエラーが表示される。

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

at backyard

Color my life with the chaos of trouble.