Babel 7.4でcore-js系の「Module not found」が出た場合の対策(babel7.4,webpack4)

概要

Babel 7.4系で core-js@3 由来エラーが出た場合の対策

環境

関連パッケージのバージョン

"@babel/core": "^7.4.5"
"@babel/preset-env": "^7.4.5"
"core-js": "^3.1.4"
"webpack": "^4.34.0"

Babel 7.4系を使ったビルドで以下のようなエラーメッセージが出た場合

Module not found: Error: Can't resolve 'core-js/modules/es6.symbol'
Module not found: Error: Can't resolve 'core-js/modules/es7.symbol.async-iterator'
Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable'

以下のようなコードで簡単に踏める

const data={key1:"val1",key2:"val2"};

for(let key of data){
    console.log(data[key]);
}

(for...of をつかっている)

対策

babel7.4系は core-js@3 が使えますということで、 core-js@3 をインストールする

npm install --save-dev core-js@3

webpack.config.js内にbabelの設定をしている場合は、
以下のようなpreset-env設定にcore-jsのバージョンをcorejs:3のように記載する

webpack.config.js抜粋

        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                presets: [
                                    [
                                        '@babel/preset-env',
                                        {
                                            'modules': 'false',//commonjs,amd,umd,systemjs,auto
                                            'useBuiltIns': 'usage',
                                            'targets': '> 0.25%, not dead',
                                            'corejs': 3
                                        }
                                    ]
                                ]
                            }
                        }
                    ],
                },

↓の部分。

   'corejs': 3

まとめ

• 古い記法だけをつかっていた場合、core-js不要な場合があります
• 以下、本家記事が詳しいです
  https://babeljs.io/blog/2019/03/19/7.4.0