RN + SES: TypeError: undefined is not a function (near '...globalThis.process.on...')

[leotm]

Follow-up to

• RN 0.66.5 + npm SES 0.18.1: Babel fails to ignore ses.cjs #10

---

npx [email protected] init RN0665 --version 0.66.5

yarn add ses

// index.js

import 'ses'; // added
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

lockdown({consoleTaming: 'unsafe'}); // added

AppRegistry.registerComponent(appName, () => App);

// metro.config.js

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {sourceExts},
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      sourceExts: [...sourceExts, 'cjs'],
    },
  };
})();

// babel.config.js

module.exports = {
  ignore: [/ses\.cjs/],
  presets: ['module:metro-react-native-babel-preset'],
};

yarn start --reset-cache

yarn start ios

Result:

 ERROR  TypeError: undefined is not a function (near '...globalThis.process.on...')

(this|global|globalThis|window).process in our RN realm contains only {"env": {"NODE_ENV": "development"}}

• nb: Deprecate global,self as aliases for globalThis LavaMoat#459

So our Node API methods (on/exit/abort/etc) are missing https://nodejs.org/api/process.html#process (being an instance of EventEmitter)

Which we now need to be added to our vanilla RN PoC

First seen in

• MMM: RN 0.66.5 + SES 0.18.1

[leotm]

NB: Not an issue with [email protected] investigation in the past

Since we don't have RN projects on older versions of SES (nor using SES at all!), supporting SES backward-compatibility for RN isn't feasible, unless latest SES version(s) prove to be a blocker in due course

[leotm]

rn-nodeify appears to be a worthwhile candidate/hack to introduce our process core node module for [email protected]
as opposed to the stand-alone shim for non-React-Native dependencies

nb: consider saner approach https://github.com/philikon/ReactNativify
or create shim with browserify then edit for RN (hacky)
previously tested react-native-process-shim which wasn't working

[leotm]

Solution:

yarn add -D rn-nodeify

yarn rn-nodeify --install "process"

// index.js

import './shim'; // added
import 'ses'; // added
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

lockdown({consoleTaming: 'unsafe'}); // added

AppRegistry.registerComponent(appName, () => App);

yarn start --reset-cache

yarn ios

Error: Unable to resolve module buffer from /Users/leo/Documents/GitHub/RN665/shim.js: buffer could not be found within the project or in these directories:
  node_modules
  ../../../node_modules

We don't need the the Node buffer API, so we can skip it in our generated shim for now (TODO: attenuate further)

if (typeof __dirname === 'undefined') global.__dirname = '/'
if (typeof __filename === 'undefined') global.__filename = ''
if (typeof process === 'undefined') {
  global.process = require('process')
} else {
  const bProcess = require('process')
  for (var p in bProcess) {
    if (!(p in process)) {
      process[p] = bProcess[p]
    }
  }
}

process.browser = false
// if (typeof Buffer === 'undefined') global.Buffer = require('buffer').Buffer // commented

// global.location = global.location || { port: 80 }
const isDev = typeof __DEV__ === 'boolean' && __DEV__
process.env['NODE_ENV'] = isDev ? 'development' : 'production'
if (typeof localStorage !== 'undefined') {
  localStorage.debug = isDev ? '*' : ''
}

// If using the crypto shim, uncomment the following line to ensure
// crypto is loaded first, so it can populate global.crypto
// require('crypto')

yarn start --reset-cache

yarn ios

We now have ourselves a functional RN 0.66.5 app (full) with Promise warnings only to look into next, but no errors as seen previously with [email protected]

 WARN  Removing intrinsics.Promise._B
 WARN  Removing intrinsics.Promise._C
 WARN  Removing intrinsics.Promise._D
 WARN  Removing intrinsics.Promise.resolve.prototype
 WARN  Tolerating undeletable intrinsics.Promise.resolve.prototype === undefined
 WARN  Removing intrinsics.Promise.all.prototype
 WARN  Tolerating undeletable intrinsics.Promise.all.prototype === undefined
 WARN  Removing intrinsics.Promise.allSettled.prototype
 WARN  Tolerating undeletable intrinsics.Promise.allSettled.prototype === undefined
 WARN  Removing intrinsics.Promise.reject.prototype
 WARN  Tolerating undeletable intrinsics.Promise.reject.prototype === undefined
 WARN  Removing intrinsics.Promise.race.prototype
 WARN  Tolerating undeletable intrinsics.Promise.race.prototype === undefined
 WARN  Removing intrinsics.%PromisePrototype%.then.prototype
 WARN  Tolerating undeletable intrinsics.%PromisePrototype%.then.prototype === undefined
 WARN  Removing intrinsics.%PromisePrototype%.done
 WARN  Removing intrinsics.%PromisePrototype%.finally.prototype
 WARN  Tolerating undeletable intrinsics.%PromisePrototype%.finally.prototype === undefined
 WARN  Removing intrinsics.%PromisePrototype%.catch.prototype
 WARN  Tolerating undeletable intrinsics.%PromisePrototype%.catch.prototype === undefined

[leotm]

iOS: Remote Debugging via Chrome V8

[leotm]

we don't want to shim with SES (unless trusted vetted shim)

edit: vetted shim discussion next endo meeting 12th July 2023

[leotm]

nb

• React Native globalThis.window does not have addEventListener endojs/endo#1018
• Add extra guard to console taming endojs/endo#1019