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 react-native@0.66.5 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 ses@0.15.9 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 ses@0.18.1
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 ses@0.15.9

 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