feat: support ESM in `react-native.config`

[szymonrybczak]

Summary:

Closes https://github.com/react-native-community/cli/issues/2167

Add support for ESM inside react-native.config file.

Test Plan:

1. Clone the repository and do all the required steps from the Contributing guide
2. Create a new project and add type: "module" inside package ✅
3. Create a react-native.config.mjs with following content

export default {
  commands: [
    {
      name: 'hello',
      func: () => {
        console.log('hello esm');
      },
    },
  ],
};

4. Run npx react-native hello and you should see hello esm log.

Checklist

• [x] Documentation is up to date to reflect these changes.
• [x] Follows commit message convention described in CONTRIBUTING.md

[satya164]

Re: test plan, test these scenarios:

• Add type: 'module' to package.json and use require in react-native.config.js - should fail unless using createRequire helper (import { createRequire } from 'node:module'; const require = createRequire(import.meta.url);)
• Add type: 'module' to package.json and use require in react-native.config.cjs
• Add type: 'module' to package.json and use import/export in react-native.config.js
• Remove type: 'module from package.json/add type: 'commonjs' and use import/export in react-native.config.mjs

You don’t need both type: 'module' and .mjs. either is enough to signal ES modules.

[thymikee]

Changing the signature of loadConfig would be breaking e.g. for rnx-kit. We could consider creating loadConfigAsync or so to avoid it. cc @tido64

[tido64]

Changing the signature of loadConfig would be breaking e.g. for rnx-kit. We could consider creating loadConfigAsync or so to avoid it. cc @tido64

Thanks, this would indeed break us. I'm also curious why everything needs be async just because of ESM? IMHO, async makes sense if you're doing a lot of things at once and then awaiting them all. But it looks like we're just async/awaiting in sequence, so I'm not really seeing any benefits.

[satya164]

everything needs be async just because of ESM

Because it's loading ES module dynamically, which needs to be async.

[karlhorky]

Nice, thanks to all of the contributors and reviewers here, great to have ESM in react-native.config.js files!

I'm not super aware of the upstreaming / integration process here in React Native projects - will this work right away out of the box with @react-native-community/[email protected]?

Eg:

1. I guess new React Native projects which start without a framework will receive this feature right away now?
2. Does this affect Expo projects at all? (I guess not)

[thymikee]

Yes, this should work with v15.1. You'll need to update the template (or your project files) to reference the newer version of the CLI. It doesn't affect Expo projects