[React Native] import.meta is only valid inside modules error when importing initOnlyAsm

Hey all, I have discovered a workaround to get it working on Android. Basically, from my findings it seems that the WASM errors get thrown even if you insert Platform checking logic to prevent code execution i.e. doing if (Platform.OS === 'android') return; will still cause the WASM errors to get thrown, so I suspect it might have something to do with the bundling stages but I’m not entirely sure…

Today I discovered the workaround by chance, I remembered reading somewhere there was a way to do lazy imports so I did a quick research, tested and landed on this solution that worked for me.

At the top of the file you can have something like this:

import type { Keyring } from '@polkadot/keyring';
import { cryptoWaitReady } from '@polkadot/util-crypto';

let _Keyring: typeof Keyring | undefined = undefined;

cryptoWaitReady().then(() => {
  import('@polkadot/keyring').then((keyring) => {
    _Keyring = keyring.Keyring;
  });
});

Then in the code below:

      if (!_Keyring) {
        throw new Error('No Keyring available');
      }

      const keyring: Keyring = new _Keyring();

Then you can now use Keyring functions.

This solution might not work properly if you need to use PolkadotJS library within a constructor of a class. For use within a constructor, something like this should work:

  constructor() {
    cryptoWaitReady().then(() => {
      import('@polkadot/api').then((api) => {
        const { WsProvider, ApiPromise } = api;
        // Your other code here...
      });
    });
  }

If your IDE complains that the lazy imports above are not supported, you just need to add something like "module": "esnext" under "compilerOptions" inside tsconfig.json file (this is if you’re using TypeScript).

Also note I did not need to do initOnlyAsm as I initially did.

There are probably more elegant solutions but this seems suffice to get PolkadotJS working on Android for now. Please feel free to share if you find a more elegant way for this workaround. Would love to know. Thanks!

You don’t need the import explicitly when using RN since the wasm-crypto 6.1.1 release.

After install wasm-crypto 6.1.5 and clear react-native cache with react-native start --reset-cache.

Everything seem be ok like initOnlyAsm with some basic function like blake2AsHex and element like Identicon.