React Native build error when installing @solana/wallet-adapter "Module parse failed"

Question

I recently installed the @solana packages in order to use the Solana Wallet Adapter but am now running into build errors. The packages I installed using npm are

• @solana/wallet-adapter-base ^0.9.16
• @solana/wallet-adapter-react ^0.15.18
• @solana/wallet-adapter-react-ui ^0.9.16
• @solana/web3.js ^1.54.1
• @solana/wallet-adapter-wallets ^0.18.7

The build error I get is

./node_modules/@solana/web3.js/lib/index.browser.esm.js 3673:30
Module parse failed: Identifier directly after number (3673:30)
You may need an appropriate loader to handle this file type.
|     key: "isActive",
|     value: function isActive() {
>       var U64_MAX = Math.pow(2n, 64n) - 1n;
|       return this.state.deactivationSlot === U64_MAX;
|     }

I am currently running react ^18.1.0

Answer 1

Two problems here:

1. Your compiler looks like it's using a transform that turns 2n ** 64n into Math.pow(2n, 64n). This is actually illegal because Math.pow() does not support BigInt – only number. An example of such a transform is babel/plugin-transform-exponentiation-operator.
2. BigInt literal expressions (eg. 2n) are only supported when your compiler targets ES2020. One solution is to upgrade your compiler's target, but another solution is to file an issue against @solana-labs/solana asking for these literals to be rewritten as BigInt(2) and BigInt(64).

Answer 2

Your build problems stem from the fact that the version of React Native you're using runs code in a JavaScript environment that doesn't support BigInt, and BigInt is required by versions of @solana/web3.js from v1.41.7 and onward.

One solution is to install (or upgrade to) React Native 0.70 and switch to the Hermes JavaScript engine.

• More context on why, from the Solana Labs team: https://twitter.com/steveluscher/status/1565232091260157952
• Upgrade guide: https://react-native-community.github.io/upgrade-helper/?from=0.69.5&to=0.70.0-rc.4
• Notes on Hermes as the new default engine in React Native >=0.70: https://reactnative.dev/blog/2022/07/08/hermes-as-the-default