7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

React Native で "TransformError Couldn't find preset ..." で怒られるときの対処法

Last updated at Posted at 2017-11-08

症状

react-native start でサーバを立ち上げると, node_modules 配下に含まれているライブラリが依存しているBabelのプリセットが反応して

TransformError Couldn't find preset "es2015"
TransformError Couldn't find preset "airbnb"

などとエラーになってしまう問題。

(備考) .babelrc の動作

親ディレクトリの `.babelrc` の設定を子の `.babelrc` で上書きし,最終的に生成された設定で子ディレクトリ内のトランスパイルを行う。

原因

npm と, React Native の方針の違いに起因する。

npm の方針

ホスティングされるパッケージはすべて CommonJS と ES5 までの実装で動作するようにトランスパイル済みであることを想定している。つまり,そもそも

node_modules以下はトランスパイル対象にならない」

ということを前提としている。ゆえに,公開されるパッケージが .babelrc を含んでいても,普通のプロジェクトではそのディレクトリがトランスパイル対象から除外されるため,トランスパイラに影響を及ぼすことは無い。

React Native の方針

通常の JavaScript コードをネイティブコードに変換する必要があるため, babel-preset-react-native を用いて

node_modules以下もトランスパイル対象にする」

という方針を採る。そのため, 依存パッケージがもし .babelrc を含んでいる場合,それに使用されているプリセットをすべて必要としてしまう。

対処法

パッケージインストール後に node_modules 下の .babelrc をすべて削除する

現状これが最善の解決策。npm scripts に以下の設定を追記。

package.json の例
{
  "scripts": {
    "clean-underlying-babelrc": "(find node_modules -type f -name .babelrc | grep -v /react-native/ | xargs rm) || true",
    "post-install": "npm run clean-underlying-babelrc",
  }
}

ライブラリ作者に .babelrc.npmignore の設定で除外するように求める

この対応をライブラリ作者全員がとってくれれば最善ではあるが,React Native 固有の事情であるため,拒否される場合もあるだろう。

.npmignore の例
/.*
/*
!/src/
!/es/
!/lib/

必要ないプリセットもすべてプロジェクトの .babelrc で記述する

一応動作はするが,新しく追加するパッケージがあるたびに,新しいプリセットに依存していないかどうかを確認する必要があるため,安定した解決策とは言えない。それに,なんとなく負けた気分…

絶対にやりたくない
{
  "preset": ["react-native", "es2015", "stage-0", "stage-1", "stage-2", "stage-3", "stage-4", "env", "airbnb"]
}

その他

React Native プロジェクトはデフォルトで babel-preset-react-native を使用するため,自分で .babelrc を置かなくてもトランスパイル可能であるが,ホームディレクトリに .babelrc がある場合はそれを読んでしまうため,結局置いておくほうが無難。上に述べた対策を実施しつつ,

{
  "preset": ["react-native"]
}

を書いておく。実際 ES.Next の使用をふんだんに使おうとすると

{
  "preset": ["react-native", "env"]
}

というように, babel-preset-env などを追加せざるを得ない。

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?