Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
39
Help us understand the problem. What is going on with this article?
@oreo3@github

Webpack 4:babel-loader のアップデートで起きたエラーを解決

More than 1 year has passed since last update.

babel-loader を 7.1.5 → 8.0.0 のアップデートで、以下のエラーが発生。

error  Module build failed (from ./node_modules/babel-loader/lib/index.js):
 Error: Couldn't find preset "@babel/preset-env" relative to directory

解決ついでにパッケージや設定を整理したので、メモしておく。

1. 関連パッケージの入れ直し

以前 Babel を 6→7 にアップデートした際、不要になったパッケージを削除したかの記憶がなかったので、関連したものは一応全部入れ直した。webpack は入れ直す必要はないだろうが一応入れ直した。

Babel 6 で使うパッケージ群と Webpack をアンインストール
npm uninstall --save-dev babel-core babel-preset-env babel-loader webpack @babel/polyfill

Babel 7 で使うパッケージ群を Webpack インストール
npm install --save-dev @babel/core @babel/preset-env babel-loader webpack

脆弱性の自動修正(完全ではない)
npm audit fix

2. .babelrc、.browserslistrc の修正

変更前

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [
          '> 0.5% in JP',
          'Firefox ESR'
        ]
      }
    }]
  ]
}

変更後

対応ブラウザの設定は、.browserslistrc で行う。
"useBuiltIns": "usage" で、指定したブラウザに必要な polyfill を import してくれる。
でも、場合によっては別途 polyfill が必要な場合もあるらしいので留意しておく。
(@babel/polyfill は不要になったのでこの記事冒頭のコマンドでアンインストールした)

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ]
  ]
}

合わせて .browserslistrc の編集(なければ作成)。
autoprefixer 等を使っていれば、すでにあるはず。
記述に対する対象ブラウザは browserl.ist でチェックできる

> 0.5% in JP
Firefox ESR

3. webpack.config.js の編集

presets を 'env' から '@babel/preset-env' に変更

webpack.config.js
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'] // 変更前は 'env'
        }
      }
    }
  ]
}

4. gulp に発生したエラーに対処

gulp (v4) のタスクを走らせようとすると、以下のエラーが。

[14:06:41] Failed to load external module @babel/register
[14:06:41] Failed to load external module babel-register
[14:06:41] Failed to load external module babel-core/register
[14:06:41] Failed to load external module babel/register

1番上の @babel/register をインストールすれば良い(他は旧いやつ)。
npm install --save-dev @babel/register


参考記事

39
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
oreo3@github
日々勉強しつつ、できる範囲でWeb制作等をしています。 デザイン、SEO、マーケティング、WordPress

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
39
Help us understand the problem. What is going on with this article?