Proof of Concept Insights - Removing Babel Plugins

[bentobox19]

PoC

https://github.com/LavaMoat/docs/blob/main/react-native-and-ses-lockdown.md

Discussion

The following errors while running the lockdown() function:

TypeError: (0 , _getPrototypeOf2.default) is not a function

or

ERROR  failed to delete intrinsics.%PromisePrototype%.then.prototype [TypeError: Unable to delete property.]

After a number of patching iterations, including:

• React Native Incompatibility: TypeError: (0 , _getPrototypeOf2.default) is not a function endojs/endo#699 (comment)
• https://github.com/LavaMoat/docs/blob/main/rn-ses-archived-notes.md#applying-two-patches

It was concluded that is more straightforward to just forfeit some plugins at the React Native preset.

• @babel/plugin-transform-runtime

  • _extends helper adds a polyfill at node_modules/@babel/runtime/helpers/extends.js
  • _getPrototypeOf helper adds a polyfill at node_modules/@babel/runtime/helpers/getPrototypeOf.js

• promise

  • Adds a polyfill to replace Promise
  • https://github.com/LavaMoat/docs/blob/main/rn-ses-archived-notes.md#facts
  • SES has troubles attempting to delete the protoytpe property of its function instances
  • We can switch these function instances with arrow functions, but we need to prevent babel from turning them back.

• @babel/plugin-transform-regenerator

  • Will try after lockdown() o write readonly objects.

PoC Solution

• Forfeit the React Native Preset at babel.config.js.
• Manually add to the above configuration file the plugins from this very preset in the folllowing fashion:
  • https://github.com/LavaMoat/docs/blob/main/react-native-and-ses-lockdown.md#setting-up-custom-plugin-arrangement-at-babelconfigjs
  • Taking care to ignore the aforementioned plugins.

Items of action

• Investigate the minimum RN plugins needed to actually run the mobile application
• Find out which procedure is actually calling to polyfill Promise
  • Suggestion (by @naugtur) Instead of patching RN we need to look at how they are checking the built-in promise on the global object because they shouldn't be overwriting this.
• Maybe we want to create a transform for the build package to prevent babel regenerator to put these monkey patches.
  • So, if RN is changing things, we could change them back!
  • This approach avoids patches, avoids creating a custom preset, and require us to just add a plugin at babel.config.js just after the preset.
• Add isHermes plugins.

[bentobox19]

Patching the dependency metro-react-native-babel-preset allows us to get rid of two problematic (for SES) plugins, and only have to maintain a single patch:

• metro-react-native-babel-preset+0.66.2.patch

diff --git a/node_modules/metro-react-native-babel-preset/src/configs/main.js b/node_modules/metro-react-native-babel-preset/src/configs/main.js
index caa45fe..8eeb742 100644
--- a/node_modules/metro-react-native-babel-preset/src/configs/main.js
+++ b/node_modules/metro-react-native-babel-preset/src/configs/main.js
@@ -174,16 +174,6 @@ const getPreset = (src, options) => {
     extraPlugins.push([require("@babel/plugin-transform-react-jsx-self")]);
   }

-  if (!options || options.enableBabelRuntime !== false) {
-    extraPlugins.push([
-      require("@babel/plugin-transform-runtime"),
-      {
-        helpers: true,
-        regenerator: !isHermes
-      }
-    ]);
-  }
-
   return {
     comments: false,
     compact: true,
@@ -196,7 +186,6 @@ const getPreset = (src, options) => {
       {
         plugins: [
           ...defaultPluginsBeforeRegenerator,
-          isHermes ? null : require("@babel/plugin-transform-regenerator"),
           ...defaultPluginsAfterRegenerator
         ].filter(Boolean)
       },