react / react/react-native

Metro babel transformer doesn't recognize .cjs config files (babel.config.cjs, .babelrc.cjs)

オープン 初心者向け
#58,525 コメント 4 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Needs: Author Feedback Needs: Version Info
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
4

説明

Description

The @react-native/metro-babel-transformer doesn't recognize .cjs babel config files, which causes silent failures when projects use "type": "module" in their package.json.

Problem

In @react-native/metro-babel-transformer/src/index.js (lines 74-88), the transformer only searches for:

  • .babelrc
  • .babelrc.js
  • babel.config.js

When a project has "type": "module" in package.json:

  • .js files are treated as ES modules by Node.js
  • Babel config files that use module.exports = function(api) {...} (CommonJS) must use the .cjs extension
  • Metro silently falls back to the default preset, ignoring custom plugins

This causes hard-to-debug issues. In my case, the react-native-worklets/plugin wasn't being applied, resulting in runtime errors like "Failed to create a worklet" with no indication that the babel config wasn't being loaded.

Expected behavior

Metro should also search for:

  • .babelrc.cjs
  • babel.config.cjs

This aligns with Babel's own configuration file resolution which supports .cjs extensions.

Workaround

Use extendsBabelConfigPath in Metro config:

// metro.config.cjs

const customConfig = {
  transformer: {
    extendsBabelConfigPath: path.resolve(__dirname, 'babel.config.cjs'),
  },
};

Environment

React Native: 0.81.5
Node.js: 24.x
pnpm monorepo with "type": "module" in package.json

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

packages/react-native-babel-transformer/src/index.js、特に 74-88 行目から始め、既存の Babel 設定の検索処理を追ってください。package.json で type を module に設定しているプロジェクトでの動作を確認し、その後、.babelrc.cjs と babel.config.cjs が検出され、デフォルトの preset に暗黙的にフォールバックするのではなく、カスタムプラグインが適用されることを検証してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, node.js, react-native
領域
mobile, tooling
issue の種類
バグ
難易度
2/5
見積もり時間
1〜3時間
活発さ
活発
明瞭さ
明確に書かれている
初心者へのやさしさ
78/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。