Skip to content

Support ESM react-native.config files #2167

Closed
#2453
Closed
Support ESM react-native.config files#2167
#2453
Labels
feature request

Description

@kraenhansen
kraenhansen
opened on Nov 12, 2023

Describe the Feature

I'd love to use modern ESM code in my React Native apps and libraries. The CLI's config package currently blocks having "type": "module" in a React Native app or library package, because the config command loads config files synchronous, with a ~ 5 year old version of cosmiconfig.

Setting "type": "module" in a package.json of an app or dependency yields the following error:

error Failed to load configuration of your project.
Error [ERR_REQUIRE_ESM]: require() of ES Module {...}/rnc-cli-bug/react-native.config.js from {...}/node_modules/cosmiconfig/node_modules/import-fresh/index.js not supported.
react-native.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename react-native.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in {...}/rnc-cli-bug/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

Users cannot rename react-native.config.js to react-native.config.cjs because it's not in the list of files being searched for, even when patching that list, yields this error:

Error: No loader specified for extension ".cjs", so searchPlaces item "react-native.config.cjs" is invalid

So, there doesn't seem to exist any workaround for this.

Possible Implementations

I believe the best solution is to upgrade cosmicconfig to a more recent version and use their async API to load the config file.
This entails that the following methods would become async:

Which would in practice break the API of both the @react-native-community/cli and @react-native-community/cli-config packages and probably require a major version bump.

A less intrusive alternative, would be to upgrade but only support CommonJS configs and simply add react-native.config.cjs and fix the issue loading it.

Note: Upgrading cosmicconfig would have the added benefit of packages being able to declare their React Native configs in their package.json files too. But that should either be disabled or named differently to avoid conflicts with the react-native main field already relied upon by Metro.

I'd be willing to contribute a PR to fix this, if there's a good chance it'll be considered for review.

Related Issues

I'm surprised, but I can't seem to find existing issues mentioning this limitation.

Activity

  1. kraenhansen
    added
    feature request
    on Nov 12, 2023

  2. robhogan commented on Nov 12, 2023

    @robhogan
    robhogan
    on Nov 12, 2023
    Collaborator

    FWIW, we intend to update cosmiconfig in Metro to support metro.config.mjs (and type: module) as soon as possible - one thing that's holding us back is that we ran into nodejs/node#35889 - use of await import is liable to segfault Node VMs - and we were seeing this intermittently in Jest (integration tests that involved using cosmiconfig) as soon as we tried to update. I'll be trying again as soon as we've moved our CI to Node 20.

    Related: react/metro#916

  3. thymikee commented on Nov 13, 2023

    @thymikee
    thymikee
    on Nov 13, 2023
    Member

    @robhogan so it looks like we're blocked on Metro? Please keep us updated, we'd happily implement this

  4. robhogan commented on Nov 13, 2023

    @robhogan
    robhogan
    on Nov 13, 2023
    Collaborator

    I wouldn't say blocked - I can't think of any technical reason this couldn't go into the CLI before Metro, although it might be less surprising if we were consistent.

    I just wanted to share the experience we had with this upgrade - it might be that you're similarly blocked by Jest under Node<20, if you have integration tests that don't mock out cosmiconfig.

  5. szymonrybczak commented on Nov 14, 2023

    @szymonrybczak
    szymonrybczak
    on Nov 14, 2023
    Collaborator

    I just wanted to share the experience we had with this upgrade - it might be that you're similarly blocked by Jest under Node<20, if you have integration tests that don't mock out cosmiconfig.

    Yes, we have - and I tried updating cosmiconfig and tests are failing because of this reason.

  6. karlhorky commented on Jan 27, 2024

    @karlhorky
    karlhorky
    on Jan 27, 2024
    Contributor

    one thing that's holding us back is that we ran into nodejs/node#35889 - use of await import is liable to segfault Node VMs

    @robhogan seems like that issue is now resolved - in case this should be noted anywhere as this blocker being removed.

  7. robhogan commented on Mar 13, 2024

    @robhogan
    robhogan
    on Mar 13, 2024
    Collaborator

    one thing that's holding us back is that we ran into nodejs/node#35889 - use of await import is liable to segfault Node VMs

    @robhogan seems like that issue is now resolved - in case this should be noted anywhere as this blocker being removed.

    Unfortunately it's only resolved for Node 20, and won't be backported, so it'll need to wait until we're on Node 20 (for CI, at least - there's probably no risk in prod as long as we don't use this in a Node VM).

  8. karlhorky commented on Mar 27, 2024

    @karlhorky
    karlhorky
    on Mar 27, 2024
    Contributor

    Ok, thanks for the answer! So I guess it's waiting until facebook/react-native and facebook/metro are on Node.js version 20?

    Taking a quick look in those repos, maybe that is tracked here?

    1. facebook/react-native CI config: https://github.com/facebook/react-native/blob/575507dd61298be2f3071e0fc01ed9715cbd7a66/.circleci/config.yml#L52
    2. facebook/react-native package.json -> engines: https://github.com/facebook/react-native/blob/575507dd61298be2f3071e0fc01ed9715cbd7a66/packages/react-native/package.json#L23-L25
    3. facebook/metro CI config: https://github.com/facebook/metro/blob/84956bd11ab0ded6f06a867120980f8524e9cab6/.circleci/config.yml#L12-L15
    4. facebook/metro package.json -> engines: https://github.com/facebook/metro/blob/84956bd11ab0ded6f06a867120980f8524e9cab6/package.json#L93-L95

    Or does this also have to do with the react-native-community/cli repo? I see a couple of references to Node.js version numbers here, which still include v18:

    cli/.github/workflows/test.yml

    Line 30 in 61b6be6

    node-version: [18, 20]

    cli/.github/workflows/test.yml

    Line 47 in 61b6be6

    node-version: [18, 20]

  9. github-actions commented on Jun 26, 2024

    @github-actions
    github-actionsbot
    on Jun 26, 2024 – with GitHub Actions

    There hasn't been any activity on this issue in the past 3 months, so it has been marked as stale and it will be closed automatically if no further activity occurs in the next 7 days.

  10. github-actions
    added
    stale
    on Jun 26, 2024

  11. karlhorky commented on Jun 26, 2024

    @karlhorky
    karlhorky
    on Jun 26, 2024
    Contributor

    not stale

  12. szymonrybczak
    removed
    stale
    on Jun 26, 2024

  13. szymonrybczak commented on Jun 26, 2024

    @szymonrybczak
    szymonrybczak
    on Jun 26, 2024
    Collaborator

    So is there any way we can move this forward without waiting for React Native making Node.js 20 as a default version? I checked and EOL for Node.js 18 is set for 30 Apr 2025.

  14. szymonrybczak commented on Jul 9, 2024

    @szymonrybczak
    szymonrybczak
    on Jul 9, 2024
    Collaborator

    hey! I've created a PR which adds support for ESM: #2453 👍

  15. c100k commented on Sep 19, 2024

    @c100k
    c100k
    on Sep 19, 2024

    Thanks @szymonrybczak for the PR. Hope it will get merged soon.

    In the meantime, this was the last issue we had while migrating our monorepo to ESM so we had to find a solution (see below).

    WARNING : this is a pretty ugly workaround and might not work for your use case. But in our case it does the job and unlocks us.

    # Rename to .js so it can be found and switch temporarily to commonjs
mv react-native.config.cjs react-native.config.js && sed -i '' 's/"type": "module"/"type": "commonjs"/g' package.json

# Launch the build
yarn react-native run-android

# When the Gradle tasks have started, revert the temporary changes
mv react-native.config.js react-native.config.cjs && git checkout -- package.json

  16. szymonrybczak commented on Sep 22, 2024

    @szymonrybczak
    szymonrybczak
    on Sep 22, 2024
    Collaborator

    @c100k ah, I see 😅 I hope that you'll be able to remove this workaround soon! 👍

  17. thymikee
    closed this as completedin #2453on Nov 5, 2024

  18. karlhorky commented on Nov 5, 2024

    @karlhorky
    karlhorky
    on Nov 5, 2024
    Contributor

    Copying my comment from the PR, since the issue is probably more visible 🤔

    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/cli@15.1.0?

    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)
  19. meta-codesync
    added a commit that references this issue on Sep 9, 2026

    fix(codegen): read react-native.config.cjs so ESM projects are not si…

    583c8f3
  20. shashikant-panchal
    added a commit that references this issue on Sep 10, 2026

    fix(codegen): read react-native.config.cjs so ESM projects are not si…

    17d484a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    feature request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions