Proof of Concept Insights - SES repository included at the Mobile App Repository

[bentobox19]

PoC

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

Discussion

Currently we are including the file lockdown.umd.js

Example:

• Find out the current version at https://www.npmjs.com/package/ses.
• Download the lockdown.umd.js file at the directory root.
• 0.15.9 is 2 days old as of 2022.02.21.

curl -O https://npmfs.com/download/ses/0.15.9/dist/lockdown.umd.js

We could, instead, use the npm ses package.

This allow us a cleaner code base and more control over the version of ses being in use.

[bentobox19]

To make the ses library work in React Native, it is important to tell babel to ignore it, and metro to accept a .cjs file as the entry point of a dependency.

• At babel.config.js add the ignore property:

// eslint-disable-next-line import/no-commonjs
module.exports = {
    ignore: [
        /ses\.cjs/,
    ],
    presets: ['module:metro-react-native-babel-preset'],
    plugins: ['transform-inline-environment-variables', 'react-native-reanimated/plugin'],
    env: {
        production: {
            plugins: ['transform-remove-console']
        }
    }
};

• At metro.config.js

const { getDefaultConfig } = require("metro-config");
const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues();

module.exports = {
    resolver : {
        ...defaultResolver,
        sourceExts: [
            ...defaultResolver.sourceExts,
            'cjs',
        ],
    },
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: true,
                inlineRequires: true,
            },
        }),
        assetPlugins: ['react-native-svg-asset-plugin'],
        svgAssetPlugin: {
            pngCacheDir: '.png-cache',
            scales: [1],
            output: {
              compressionLevel: 6,
            },
          },
    },
    maxWorkers: 2
};