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

[Victorien-Tardif]

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,
      },
    ],
  ],
};

[Victorien-Tardif]

Reading this https://github.com/facebook/metro/blob/faef2e6c6dfcfdd3e3fa4e25ac823ef99440a185/packages/metro-react-native-babel-transformer/src/index.js#L80 I now understand the problem but what should be done?

[sudoooooo]

Reading this

https://github.com/facebook/metro/blob/faef2e6c6dfcfdd3e3fa4e25ac823ef99440a185/packages/metro-react-native-babel-transformer/src/index.js#L80

I now understand the problem but what should be done?

Hi~Have you solved the problem? I config the 'babelTransformerPath' in metro.config.js, but I hope the 'metro-react-native-babel-transformer' can support to set on the root, or is there another way?

[Victorien-Tardif]

Reading this https://github.com/facebook/metro/blob/faef2e6c6dfcfdd3e3fa4e25ac823ef99440a185/packages/metro-react-native-babel-transformer/src/index.js#L80

I now understand the problem but what should be done?

Hi~Have you solved the problem? I config the 'babelTransformerPath' in metro.config.js, but I hope the 'metro-react-native-babel-transformer' can support to set on the root, or is there another way?

Hi, I did not solved the problem no :/ I just found a way to transpile everything with one config. That's not ideal at all.

[draperunner]

We are using Yarn Workspaces and are patching metro-react-native-babel-transformer/src/index.js using patch files:

    babelRC = {
      plugins: [],
+     babelrcRoots: [ '../*' ],
      extends: extendsBabelConfigPath
    };

This works, but suddenly there is a version mismatch in the dependencies of react-native and @react-native-community/cli. One depends on metro-react-native-babel-transformer v0.59 and the other v0.58. This breaks our patch, as the CLI's transformer is put somewhere else in node_modules.

It would be great to have a way to specify babelrcRoots without having to patch node_modules.

[danilhendrasr]

Any updates on this?

[eliw00d]

I spent a lot of time trying to troubleshoot this and then came across this issue. I'll try patching metro-react-native-babel-transformer but it would be nice to get some official support!

[mikebrsv]

Any updates?