babel-loaderをv8に上げたらエラーが出たときの解決法

babel-loaderをv8に上げたらエラーが出たのでその解決法

babel-loaderを バージョンをv7からv8に上げたら、下記のようなエラーが出ました。

Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

まぁバージョン上げたらこういうのつきもんやけども。

今回は、エラー文読んでいくと、

babel-loaderv8使うんやったらBabel v7.x使わなあかんで。Babel v6.x使いたいんやったらbabel-loaderv7系使わなあかんわ。むちゃしたあかんで。ほんまに。

って感じのこと言ってます。

まぁ要はバージョンがうまいことあってないってことです。

解決方法

まぁ公式に書いてるよね。

babel-loader - npm
https://www.npmjs.com/package/babel-loader

babel v8 にすると、babel-core@babel/coreに変わったみたい。あんまり更新してなかったから知らなかった笑 あー見たことはあるーって感じ。

なので、ここらへんでコケてたみたい。

なので、こんな感じで修正したらうまいこと動いた。

npm uninstall babel-core babel-preset-env

まず、babel-corebabel-preset-envをアンインストールします。
んでその後に@系のやつインストールします。

npm install --save-dev @babel/core @babel/preset-env

これで、babe-loaderには対応できた感じになります。

ただ、Webpackとか使ってたりしたら、これだけじゃダメで、まぁ公式にも書いてるんやけど、webpack.config.jspresetsのところ、今までbabel-preset-envとして書いてたところを変えないといけないです。

webpack.config.js

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

はい!

これで、うまいこと動くはずです!

Kouki Okuda (ocws)サービス作りたいフリーランス / フロントエンドエンジニア / 👦お仕事募集中👦⇒⇒⇒ WordPress / EC / React / Vue / Laravel / SEO / MEO / Webマガジン運営 http://hanzou-magazine.net
https://ocws.jp