🗒️

Babel plugin exception: isV8IntrinsicIdentifier is not a function

に公開
React Native
Expo
tech

[Expo SDK 54] Babel plugin exception: isV8IntrinsicIdentifier is not a function の解決方法

はじめに

Expo SDK 54とAWS Amplify Gen2を使用したプロジェクトで、npx expo startを使用したのちBabelエラーが発生し、アプリが起動できなくなった。
自身のメモ用と同じ問題に遭遇した方の参考になればと思い、解決方法を共有します。

環境

  • Frontend: Expo SDK 54 "~54.0.10"
  • Backend: AWS Amplify Gen2
  • Router: expo-router "~6.0.8"
  • Animation: react-native-reanimated (Worklets使用) "~4.1.1" ←ここが原因?

発生した問題

エラーメッセージ

node_modules/expo-router/entry-classic.js: 
XXX/node_modules/expo-router/entry-classic.js: 
[Worklets] Babel plugin exception: (0 , types_12.isV8IntrinsicIdentifier) is not a function

状況

  • expo-routerを使用したプロジェクトで突然発生
  • ビルド時にエラーが出てアプリが起動しない
  • react-native-reanimatedのWorklets機能が関係している模様

解決方法

以下のBabel関連パッケージを明示的にインストールすることで解決しました。

npm install --save-dev @babel/generator @babel/types

yarnの場合：

yarn add -D @babel/generator @babel/types

pnpmの場合：

pnpm add -D @babel/generator @babel/types

インストール後

npx expo start --clear (-cでも可)

これでエラーが解消され、正常に起動するようになりました。

なぜこれで解決したのか（生成AIに聞いて）

エラーの原因

このエラーは、Babel関連パッケージ間のバージョン不整合が原因でした。

  1. react-native-reanimatedのWorklets機能が内部でBabelプラグインを使用
  2. そのプラグインが @babel/types の isV8IntrinsicIdentifier メソッドを呼び出し
  3. しかし、プロジェクト内の @babel/types のバージョンが古く、このメソッドが存在しなかった

Babelとは？

Babelは、最新のJavaScriptコードを古い環境でも動作するように変換（トランスパイル）するツールです。

// 私たちが書くコード（最新のJavaScript）
const greeting = (name) => `Hello, ${name}!`;

// Babelが変換後（古い環境でも動くコード）
var greeting = function(name) {
  return "Hello, " + name + "!";
};

React Nativeでは、以下の変換を行っています：

  • JSX → JavaScript
  • 最新JS機能 → 互換性のあるJS
  • react-native-reanimatedのWorklets変換

解決した理由

@babel/generator と @babel/types を明示的にインストールすることで：

  1. 依存関係の解決: パッケージマネージャーが最新の互換性のあるバージョンをインストール
  2. バージョンの整合性: react-native-reanimatedが期待するAPIを持つバージョンが確実にインストールされる
  3. 依存関係ツリーの最適化: 複数のパッケージが同じBabelパッケージを共有できるようになる

isV8IntrinsicIdentifier は比較的新しいAPIのため、古いバージョンの @babel/types には存在しません。明示的にインストールすることで、このAPIをサポートするバージョンが使われるようになりました。

今後の対策

同様の問題を避けるために、package.json に以下を追加しておくことをおすすめします：

{
  "devDependencies": {
    "@babel/generator": "^7.20.0",
    "@babel/types": "^7.20.0"
  }
}

また、以下のパッケージをアップデートする際は、Babel関連パッケージも一緒に更新することを推奨します：

  • expo-router
  • react-native-reanimated
  • その他Babelプラグインを使用するライブラリ

参考情報

まとめ

Expo RouterとAmplify Gen2を使用したプロジェクトで発生したBabelエラーは、@babel/generator と @babel/types を明示的にインストールすることで解決しました。

同じ問題に遭遇した方の助けになれば幸いです！

Discussion