react / react/react-native

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

Open Beginner friendly
#58,525 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Needs: Author Feedback Needs: Version Info
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with packages/react-native-babel-transformer/src/index.js, especially lines 74-88, and trace the existing Babel config lookup. Check behavior for projects whose package.json sets type to module, then verify that .babelrc.cjs and babel.config.cjs are discovered and custom plugins are applied instead of silently falling back to the default preset.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js, react-native
Domain
mobile, tooling
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.