Add "babelRCPath" transformer option for custom Babel config

[LunatiqueCoder]

Summary

👋 Hello!

I'm so intrigued by the fact that more and more people are trying to use React Native and Next.js together. Libraries like Solito and Tamagui make it so much easier!

The most popular way is to use a monorepo with basically two apps, one with React Native and one with Next.js. However, I kept experimenting with everything in one app, no monorepo (just like Expo). The only issue I experienced so far is with the babel.config.js. While Next.js uses SWC, if there is a babel.config.js file on the root project, it will gracefully fall back to Babel. I hoped to find Next.js to implement a similar option to Metro's enableBabelRCLookup, but no luck. For this reason I need this transformer option to pass in a custom Babel config, so only Metro will pick it up, but not Next.js.

I believe this could be helpful for other scenarios as well.

Note: Jest also supports this:

// package.json
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [...],
    "transform": {
      "\\.[jt]sx?$": [
        "babel-jest",
        {
          "configFile": "./babel.config.native.js"
        }
      ]
    },
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|solito)"
    ]
  },

Test plan

I've built a template called 🌘 Luna to demonstrate this implementation by using a babel.config.native.js. I'm using patch-package to apply those changes and everything seems fine so far?

Steps to test it:

1. npx react-native init MyAppName
2. Apply the changes from this PR
3. Add the following line to your metro.config.js:

module.exports = {
  transformer: {
    babelRCPath: 'babel.config.native.js', // <----- add this line
  },
};

4. Rename babel.config.js to babel.config.native.js.
5. yarn start --reset-cache
6. Run app.

EDIT:

I just found out that Next.js actually has an experimental option to fix this, so I can actually try that out, however I would be very happy to contribute if those changes are relevant.

// next.config.js
module.exports = {
  experimental: {
    forceSwcTransforms: true,
  },
}

[facebook-github-bot]

Hi @LunatiqueCoder!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[LunatiqueCoder]

Didn't receive any feedback, I guess nobody found it useful at all. Closing.