From 650534097cbe2e968d8850805b392ae211ca0b70 Mon Sep 17 00:00:00 2001
From: Alex Hunt <huntie@meta.com>
Date: Fri, 27 Sep 2024 05:37:40 -0700
Subject: [PATCH] Switch Babel parsing from legacy Flow plugin to hermes-parser

Summary:
Following D62161923, we began to lose sync with modern Flow syntax when Metro's `transformer.hermesParser` option is disabled. This config option loads Babel for transformation (instead of `hermes-parser`), which requires a Babel plugin to parse (not strip) Flow syntax.

This diff migratess us away from `babel/plugin-syntax-flow` (see also https://github.com/babel/babel/issues/16264) and uses the modern [`babel-plugin-syntax-hermes-parser`](https://www.npmjs.com/package/babel-plugin-syntax-hermes-parser) instead (a component of the modern Hermes Parser stack).

Following this change, new projects that unset `transformer.hermesParser` will compile.

Resolves https://github.com/facebook/react-native/issues/46601.

Changelog:
[General][Fixed] - Fix parsing of modern Flow syntax when `transformer.hermesParser = false` is configured in Metro config

Reviewed By: cipolleschi

Differential Revision: D63535216
---
 .../react-native-babel-preset/package.json     | 18 +++++++++---------
 .../src/configs/main.js                        |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react-native-babel-preset/package.json b/packages/react-native-babel-preset/package.json
index b89f14736ce610..70e97ce0ea46b0 100644
--- a/packages/react-native-babel-preset/package.json
+++ b/packages/react-native-babel-preset/package.json
@@ -15,23 +15,16 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/plugin-transform-async-generator-functions": "^7.25.4",
-    "@babel/plugin-transform-class-properties": "^7.25.4",
     "@babel/plugin-proposal-export-default-from": "^7.24.7",
-    "@babel/plugin-transform-logical-assignment-operators": "^7.24.7",
-    "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
-    "@babel/plugin-transform-numeric-separator": "^7.24.7",
-    "@babel/plugin-transform-object-rest-spread": "^7.24.7",
-    "@babel/plugin-transform-optional-catch-binding": "^7.24.7",
-    "@babel/plugin-transform-optional-chaining": "^7.24.8",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-export-default-from": "^7.24.7",
-    "@babel/plugin-syntax-flow": "^7.24.7",
     "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
     "@babel/plugin-syntax-optional-chaining": "^7.8.3",
     "@babel/plugin-transform-arrow-functions": "^7.24.7",
+    "@babel/plugin-transform-async-generator-functions": "^7.25.4",
     "@babel/plugin-transform-async-to-generator": "^7.24.7",
     "@babel/plugin-transform-block-scoping": "^7.25.0",
+    "@babel/plugin-transform-class-properties": "^7.25.4",
     "@babel/plugin-transform-classes": "^7.25.4",
     "@babel/plugin-transform-computed-properties": "^7.24.7",
     "@babel/plugin-transform-destructuring": "^7.24.8",
@@ -39,8 +32,14 @@
     "@babel/plugin-transform-for-of": "^7.24.7",
     "@babel/plugin-transform-function-name": "^7.25.1",
     "@babel/plugin-transform-literals": "^7.25.2",
+    "@babel/plugin-transform-logical-assignment-operators": "^7.24.7",
     "@babel/plugin-transform-modules-commonjs": "^7.24.8",
     "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
+    "@babel/plugin-transform-numeric-separator": "^7.24.7",
+    "@babel/plugin-transform-object-rest-spread": "^7.24.7",
+    "@babel/plugin-transform-optional-catch-binding": "^7.24.7",
+    "@babel/plugin-transform-optional-chaining": "^7.24.8",
     "@babel/plugin-transform-parameters": "^7.24.7",
     "@babel/plugin-transform-private-methods": "^7.24.7",
     "@babel/plugin-transform-private-property-in-object": "^7.24.7",
@@ -57,6 +56,7 @@
     "@babel/plugin-transform-unicode-regex": "^7.24.7",
     "@babel/template": "^7.25.0",
     "@react-native/babel-plugin-codegen": "0.77.0-main",
+    "babel-plugin-syntax-hermes-parser": "^0.23.1",
     "babel-plugin-transform-flow-enums": "^0.0.2",
     "react-refresh": "^0.14.0"
   },
diff --git a/packages/react-native-babel-preset/src/configs/main.js b/packages/react-native-babel-preset/src/configs/main.js
index 6178f4fb750bae..c3b7f9d914224a 100644
--- a/packages/react-native-babel-preset/src/configs/main.js
+++ b/packages/react-native-babel-preset/src/configs/main.js
@@ -25,7 +25,7 @@ function isTSXSource(fileName) {
 const loose = true;
 
 const defaultPlugins = [
-  [require('@babel/plugin-syntax-flow')],
+  [require('babel-plugin-syntax-hermes-parser')],
   [require('babel-plugin-transform-flow-enums')],
   [require('@babel/plugin-transform-block-scoping')],
   [require('@babel/plugin-transform-class-properties'), {loose}],