common: mnemonicGenerate is undefined on React Native (expo 5.0.3)

Hey,

I managed to install the latest version of@polkadot/util-crypto on React Native (expo) using npm.

when I import the package uisng import { mnemonicGenerate } from '@polkadot/util-crypto'

mnemonicGenerate is undefined. To support CommonJS I had to add metro.config.js and the following code:

const { getDefaultConfig } = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push('cjs');

module.exports = defaultConfig;

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 15 (12 by maintainers)

Most upvoted comments

It will be contained in the stable release tomorrow.

jacogr on Mar 19, 2022

This is weird - TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNGetRandomValues.getRandomBase64') at node_modules/@polkadot/x-randomvalues/react-native.cjs:31:39 in getRandomValuesNative (but a different issue)

Ok, so I can adjust the build outputs for all to point to the .cjs file everywhere. (I still cannot see how this is correct since top-level we have "type": "module" which indicates ESM for all files. The .cjs extension however carries the type information hence being allowed)

jacogr on Mar 15, 2022

Ok, this is how I would debug this (since stack-traces are a luxury here). This is on a duplicate project, here just using minimal dependencies.

step 1

Figure out if Expo/Metro/whatever handles the main/module correctly with no issues on a very, very basic package.

import { packageInfo, xglobal } from '@polkadot/x-global';

// interested if the type field here is esm or cjs (that will show what Expo does)
console.log('packageInfo=', JSON.stringify(packageInfo));

// this should hopefully work, only main & module fields in the package.json
console.log('xglobal=', xglobal);

step 2

Assuming the above passes, we turn up the heat with a package.json that does have a react-native entry as well. (If this fails, continue to step 3, if this passes… well, that would be weird)

import { getRandomValues, packageInfo } from '@polkadot/x-randomvalues';

 // interested if the type field here is esm or cjs (that will show what Expo does)
console.log('packageInfo=', JSON.stringify(packageInfo));

// see if this works, i.e. should be something
console.log('getRandomValues=', getRandomValues(new Uint8Array(5)));

step 3

Now we see if RN actually can work with the react-native field in the export map only or if it needs the react-native key (this key points to ESM).

(a) First we open node_modules/@polkadot/x-randomvalues/package.json and remove the react-native as well as browser fields (those top-level, not under the exports key)

(b) Repeat the test above

step 4

Repeat with something more substantial, x-textdecoder

addendum

I’m saying this is how “I would debug this” but since I cannot for the life of me get a RN environment setup (despite best efforts), help would be appreciated. If step 3 works, it is actually problematic since some bundlers (browserify) currently still requires the browser field…

jacogr on Mar 15, 2022