react / react/metro

Why can't I use the babelrcRoots option in babel.config.js file?

Open
#469 7 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
5.6k
Forks
696
Avg merge
8m
Merged PRs (30d)
7

Description

Do you want to request a feature or report a bug?

A bug I guess

What is the current behavior?

When specifying the babelrcRoots, bundling fails with a babelrcRoots is not allowed in .babelrc or "extend"ed files' error but... This is my main babel.config file and I don't understand why it would be extended? I suspect metro to extend it but... then what can I do?

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

Just add the babelrcRoots option in the babel.config.js file

What is the expected behavior?

This option should just be available, I need some sub-modules to be transpiled with their own .babelrc files and they are not as I can't specify the babelrcRoots.

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

metro 0.56.3
RN 0.61.2
node 10.16.0
macOS Catalina 10.15

metro.config.js file

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

babel.config.js file

module.exports = {
  babelrcRoots: [
    /node_modules\/@NoduModulesWithTheirOwnBabelRcFiles/,
  ],
  presets: [
    'module:metro-react-native-babel-preset',
  ],
  plugins: [
    'transform-inline-environment-variables',
    [
      'react-intl-auto',
      {
        filebase: true,
        includeExportName: true,
      },
    ],
  ],
};

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 the provided babel.config.js and metro.config.js, then reproduce the babelrcRoots configuration using the reported Metro 0.56.3, React Native 0.61.2, and Node 10.16.0 versions. Trace why Metro reports that babelrcRoots is in an extended file and verify whether submodules with their own .babelrc files are transpiled as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
build-system, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.