BigInt-related SyntaxError on Safari 13 OSX, iOS <= 13 due to bcrypto

[miracle2k]

As discussed on Discord:

1. The file https://github.com/bcoin-org/bcoin/blob/master/node_modules/bcrypto/lib/bn.js is at the core of this issue.
2. The file itself gets pulled in through bcoin/lib/protocol/networks.js and possibly others.

bcrypto uses BigInt, which some browsers do not support. The library provides an alternative implementation of its big number backend intended for browsers. Apparently, their first approach is to mapping each file to its browser-version in package.json. webpack/cra seems not to respect this.

Secondly, the file bcrypto/lib/bn.js is supposed to load the right implementation. Unfortunately, this is a problem for create-react-apps. They look at end env variable process.env.NODE_BACKEND, which cannot be set in CRA (the REACT_APP prefix is required). In addition, it seems that even if this env variable is set, webpack will still try to bundle all require() calls, causing the SyntaxError to be triggered in Safari and aborting the load.

The solution that worked for me was to use the IgnorePlugin on the native/bn.js file, which will cause webpack to use the version intended for browsers:

new webpack.IgnorePlugin({
   resourceRegExp: /native\/bn/,
   contextRegExp: /bcrypto/
})

However, to use this, we will need to eject, or, use a wrapper like craco which allows the CRA config to be customized. The latter might look like this.