[0.78] Bump Metro to 0.81.3, fix "_interopRequireDefault is not a function"

[robhogan]

Target Branch(es)

0.78

Link to commit or PR to be picked

facebook/react-native#50129

Description

Fixes: facebook/metro#1464

Picks facebook/react-native#49780 to address a misalignment of @react-native/metro-config defaults with the behaviour of Metro >=0.81.3, and ensures all users are on at least 0.81.3.

[react-native-bot]

Thank you for opening a new pick-request for React Native.
Those are the criterias we follow when accepting/rejecting a pick request (source).

If your pick does not satisfy the criteria below, please close it as it will not be considered.

✅ Which pick requests we accept

1. ✅ Fixes for regressions to core APIs. Examples:
   • A core component is behaving differently between version 0.X and 0.X-1
   • The TurboModule.getEnforcing function is throwing an assertion error which is not expected.
2. ✅ Fixes to bugs in the core React Native’s experience. Examples:
   • Breakpoints in React Native DevTools not working correctly in the debugger
   • Fast Refresh not working as expected
   • Metro bundler not starting properly or ignoring the configuration file
   • Buttons that are not clickable
3. ✅ Fixes to APIs used by 3P libraries and Out-of-tree platforms. Examples:
   • An API that is used by react-native-macos is not behaving as expected or regressing
4. ✅ Bump of patch version of dependencies. Example:
   • Bump Gradle from 8.11.0 to 8.11.1
5. ✅ Fixes for Low/High Security Vulnerability. Example:
   • Bump Gradle from 8.11.0 to 8.12.0 if there is a security vulnerability in 8.11 and there is no version 8.11.x which would contain the same fix.
6. ✅ Fixes and reverts of accidental breaking changes. Example:
   • Reverting or fix-forwarding a migration to Kotlin of a file (say ReactRootView.java ) if that is causing a breaking change for the whole React Native ecosystem.
7. ✅ Performance improvements picks. Examples:
   • Fixing unnecessary rendering on FlatList.
8. ✅ Any pick if the release is still in RC0 (after RC1 the previous listed criteria applies)

❌ Which pick requests we don’t accept

9. ❌ Any pick that will introduce a breaking change after RC1. Example:
   • A bugfix that contains a refactoring, resulting in changes to the public API of a class
10. ❌ Any pick that introduces a new feature after RC1. Example:
    • A commit that introduces a new API or a specific feature for a component.
11. ❌ Bump of major/minor version of dependencies. Example:
    • Bump Gradle from 8.11.0 to 8.12.0
    • Bump Gradle from 8.11.0 to 9.0.0
12. ❌Bump of a dependency to a non stable/alpha/beta version. Example:
    • Bump Gradle from 8.11.0 to 8.11.1-beta.1
13. ❌Any pick that introduces changes to the testing infrastructure of React Native after RC1. Examples:
    • Changes to the GitHub Actions workflows to optimize it, even if they’re on main.
    • Changes to the logic used to publish packages to NPM or Maven Central
14. ❌ Pick composed by various commits that has several merge conflicts
    • If your pick is too complicated to apply on the release branch, we’re going to reject it.
15. ❌ Any other non-critical improvement that landed on main.
    • In general those will ship in the following version unless they fit in one of the criteria above
16. ❌ Any other pick which is considered “small enough” to make it into a release.
    • If your pick is a one liner but is a ‘nice to have’, we won’t be picking it, as it has the risk of destabilizing the release and further delaying the release.

ℹ️ What makes for a good pick

In order for your pick to be considered, please do the following:

• ℹ️ Have a pick that contains only one commit from main, or only one PR against the release branch.
• ℹ️ Have a clear explanation of why your pick should be considered, ideally referencing one of the criteria above.
• ℹ️ Target only one minor version of React Native (e.g. [0.76]). If you want your pick to be applied to more versions, please open different picks.

[mjmasn]

I don't want to open a separate issue for this as I have no idea how to create a reliable reproducer for it but we've been hitting this issue intermittently since upgrading to React Native 0.78 and it also seems to manifest as TypeError: Cannot read property 'x' of undefined where x is a named import of a module.

What's worrying is that it seems to be random (so guessing some kind of race condition somewhere) whether a build will have the issue or not. Literally re-running a bitrise build completely unchanged will sometimes fix the issue.

Originally we were seeing a crash on startup so it was easy to tell if a build had been successful or not (so we thought), but since 'fixing' the issue with yarn resolutions pinning metro and metro-* packages to 0.81.4 now it seems similar issues are happening deeper in the app which makes this even more insidious. I'm not convinced the issue is fully resolved.

If it makes any difference our metro config is using

unstable_conditionNames: ['xxx', 'react-native', 'browser'],

where xxx is a custom condition name relating to our app, and browser is added to work around the axios issue where the default export is the Node.js version of the library. Previously we also had require in there but have removed it as part of attempting to solve this issue.

[cipolleschi]

@robhogan can you have a look at this?
@mjmasn have you tried applying the patch proposed by this PR?

[mjmasn]

@cipolleschi not exactly that patch but I have done a similar thing via yarn resolutions which should have a similar effect I think

"resolutions": {
    // ...
    "metro-babel-register": "^0.81.4",
    "metro-config": "^0.81.4",
    "metro-core": "^0.81.4",
    "metro-memory-fs": "^0.81.4",
    "metro-resolver": "^0.81.4",
    "metro-runtime": "^0.81.4",
    "metro-transform-plugins": "^0.81.4",
    "metro": "^0.81.4",
    // ...
},

it looks like this fix was picked into 0.77.2 recently so I'm planning to spend some time this afternoon or tomorrow morning trying to get a reproduction together on 0.77.1 / 0.77.2

[cipolleschi]

✅ Merged

[mjmasn]

Hi @cipolleschi, sorry to bother you but we never got any reply on this. I've added a bunch of detail to the linked issue (facebook/metro#1478). We've been trying to resolve this for ~4 weeks now and it's causing a lot of frustration as it appears to be non-deterministic and very difficult to debug and means our app is either completely broken or partial broken in probably 2/3 of all our builds.