react / react/react-native

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

Abierto Apto para principiantes
#58,525 4 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Needs: Author Feedback Needs: Version Info
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con packages/react-native-babel-transformer/src/index.js, especialmente con las líneas 74-88, y sigue la búsqueda existente de la configuración de Babel. Comprueba el comportamiento para proyectos cuyo package.json establece type en module y, a continuación, verifica que .babelrc.cjs y babel.config.cjs se detecten y que se apliquen los plugins personalizados en lugar de recurrir silenciosamente al default preset.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, node.js, react-native
Área
mobile, tooling
Tipo de issue
Error
Dificultad
2/5
Tiempo estimado
1-3 horas
Estado de actividad
Activo
Claridad
Bien especificado
Aptitud para principiantes
78/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.