Metro babel transformer doesn't recognize .cjs config files (babel.config.cjs, .babelrc.cjs)
Nessuno ha ancora preso questa issue.
- Lingua principale
- C++
- Stelle
- 127k
- Fork
- 25.3k
- Merge medio
- 1g 23h
- PR unite (30g)
- 4
Descrizione
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
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia da packages/react-native-babel-transformer/src/index.js, in particolare dalle righe 74-88, e segui la ricerca esistente della configurazione Babel. Verifica il comportamento per i progetti il cui package.json imposta type su module, quindi verifica che .babelrc.cjs e babel.config.cjs vengano rilevati e che i plugin personalizzati vengano applicati invece di ripiegare silenziosamente sul default preset.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, node.js, react-native
- Ambito
- mobile, tooling
- Tipo di issue
- Bug
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Stato di attività
- Attiva
- Chiarezza
- Specificata chiaramente
- Idoneità per principianti
- 78/100