fix: Migrate to babel-plugin-syntax-hermes-parser

[huntie]

Summary

Fixes compatibility of react-native-builder-bob/babel-preset with React Native versions >= 0.76.0 — likely broken today, without user config modifications.

• @babel/preset-flow is discontinued. The Flow language has since evolved (e.g. as syntax) and newer react-native versions can no longer be parsed.
• This is succeeded by babel-plugin-syntax-hermes-parser.

Context:

• Missing Semicolon in node-modules/react-native/index.js at line 313 facebook/react-native#50683 (comment)

Test plan

Note

TO DO (would also appreciate if a maintainer had time to E2E validate this)

[satya164]

Thanks for the PR. Seems the jest tests are failing after this change with a syntax error in some flow files 🤔

Looking at the related issue, I'm also a bit confused why they have this issue. We use the custom preset only for library code in src, and still use the React Native babel preset for both app and library code - so our babel preset shouldn't affect react-native in node_modules

react-native-builder-bob/packages/react-native-builder-bob/babel-config.js

Line 54 in 7dc0af2

require.resolve('./babel-preset'),

Haven't had a chance to try it locally though.

[satya164]

Ah, I guess coz babel-plugin-syntax-hermes-parser is just a syntax plugin and not a transform. Is there an officially supported flow transform plugin?

[satya164]

Looks like React Native includes flow-strip-types transform https://github.com/facebook/react-native/blob/38fefb2771d7ff65568fa989f2ca4a5bf44e58ec/packages/react-native-babel-preset/src/configs/main.js#L214

Which we also need to include to preserve the previous behavior.

[satya164]

I tested the linked repro huextrat/react-native-rate-app#201 but i can't reproduce the syntax error locally in React Native app. Looking at the PR, seems they are talking about Jest, which is a different issue, and should be fixed by adjusting the babel config at the root to https://github.com/callstack/react-native-builder-bob/blob/a260218a99443cac14106fff76321f32fbde32c7/packages/create-react-native-library/templates/common/babel.config.js cc @huextrat

I'll update this PR later to move to the hermes syntax parser and flow strip types transform before merging.

[huntie]

@satya164 Ah yeah, need both. Are you happy to own?

[satya164]

@huntie yeah I'll take care of adding it.