エラー: Field 'browser' doesn't contain a valid alias configurationが出る時[React]

発生したエラー

Reactでtsxファイルをimportしようとしたら、webpackのビルドで下記のエラーが発生した。

Module not found: Error: Can't resolve './foo' in '.../src'
resolve './foo' in '.../src'
  using description file: .../package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: .../package.json (relative path: ./src/foo)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        .../src/foo doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        .../src/foo.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        .../src/foo.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        .../src/foo.wasm doesn't exist
      as directory
        .../src/foo doesn't exist

原因

wabpackの設定ファイルで、tsxに対する記述を書いてなかったから。

対応方法

webpack.config.jsのmodule.exportsに、resolve.extensions[]を追加し、この中に.tsxの記述を追加したところ、tsxのファイルのimportを正しく認識させることができた。

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.(js|ts|tsx)$/,
                exclude: /node_modules/,
                loader: 'ts-loader',
            }
        ]
    },
+   resolve: {
+       extensions: ['.js', '.ts', '.tsx']
+   }
}

resolve.extensionsの意味

webpack.config.jsのresolveのオプションは、モジュールの解決方法を変更します。何も設定しなくてもWebpackはある程度妥当なデフォルト値を提供してくれています。ですが、reslveする内容を変更することが可能です。

webpackは、ファイルを探すときにresolve.extensionsに書かれた拡張子のファイルを確認します。

もし、拡張子違いで同名のファイルが複数存在する時は、resolve.extensionsに書かれた順にファイルの存在をチェックします。最初に見つけたファイルだけが読み込まれ、残りのもの同名ファイルのimportはスキップされます。

Amazonでおトクに買い物する方法

AmazonチャージでポイントGET

Amazonは買いもの前にAmazonギフト券をチャージしてポイントをゲットしないと損！