Ethers.js: Wallet from Mnemonic Throwing an error (React-Native)

[raymogg]

When attempting to generate a wallet using a mnemonic in React Native the following error occurs:

[16:45:48] TypeError: TypeError: Type error

This error is located at:
in Home (at SceneView.js:9)
in SceneView (at DrawerView.js:87)
in RCTView (at View.js:60)
in View (at DrawerLayoutAndroid.android.js:184)
in AndroidDrawerLayout (at DrawerLayoutAndroid.android.js:198)
in DrawerLayoutAndroid (at DrawerView.js:84)
in DrawerView (at createNavigator.js:57)
in Navigator (at createNavigationContainer.js:376)
in NavigationContainer (at App.js:15)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)

This error is located at:
in NavigationContainer (at App.js:15)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)

• node_modules/ethers/dist/ethers.min.js:1:234728 in M
• node_modules/ethers/dist/ethers.min.js:1:235065 in fromMnemonic
• node_modules/ethers/dist/ethers.min.js:1:280016 in fromMnemonic
• common/wallet.js:6:38 in generateWallet
• App.js:36:52 in Home
• node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:9050:17 in mountIndeterminateComponent
• node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:12924:25 in performUnitOfWork
• ... 16 more stack frames from framework internals

This error also occurs when attempting to create a random wallet. This is the code used to generate the error.

//Works
ethers.Wallet("0x0123456789012345678901234567890123456789012345678901234567890123");
//Type error
ethers.Wallet.fromMnemonic("radar blur cabbage chef fix engine embark joy scheme fiction 
master release");
//Type error
ethers.Wallet.createRandom();

I am guessing this may be related to #330 as I have had to use the minified version to use Ethers js in the react native app.

[ricmoo]

I wonder if it is a missing stub? The RN environment is missing a lot of JavaScript basics... :s

There is no more info as to what the Type is?

Do you know if RN will pick up the module field in the package.json?

[ricmoo]

Heya! So, I think I've solved the RN issues... Can you upgrade to 4.0.9 and try:

// Import the required shims
import 'ethers/dist/shims.js';

// Import the ethers library
import { ethers } from 'ethers';

Notes: https://docs.ethers.io/ethers.js/html/cookbook-react.html

[raymogg]

Unfortunately that didn't work, still getting the exact same type error. I tried using both the minified and non minified versions of ethers . The non minified version now works on version 4.0.9, however only for creating a wallet via private key (which also still works with the minified version).

Should I use a minified version of the shims file too? it seems the dist version is minified already.

[ricmoo]

What version of RN are you using?

I have the following code (just the stock demo app):

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import 'ethers/dist/shims.js';
import { ethers } from 'ethers';
import { zh_cn } from 'ethers/wordlists';

export default class App extends React.Component {
  render() {
    let value = ethers.utils.parseEther("1.0").add(1000).toString();
    let address = ethers.Wallet.createRandom({ locale: zh_cn }).mnemonic;
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app! RicMoo 2</Text>
        <Text>{address.normalize('NFKC')}</Text>
        <Text>{atob("abc")} </Text>
        <Text>{value}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Which works fine. Can you produce a minimum app that reproduces this error?

[ricmoo]

(I was just using the Chinese word list to check another issue; it shouldn't be required)

[raymogg]

Using your exact demo app code I still get the type error. I am using expo SDK 30.0.0 which uses RN 0.55.4.

I also created a brand new create react native expo app (using the same SDK version 30.0.0) to ensure that it wasn't anything project specific and got the same type error again.

[ricmoo]

Mind jumping in the ethers Lobby for a minute to help narrow this down?

https://gitter.im/ethers-io/Lobby

[ricmoo]

Huge thanks to @raymogg for helping identify the issue.

It seems like on Linux, the node compiled does not implement String.prototype.normalize (or more accurately, implements it with a function that always throws). The new shims check the normalize actually works, and on platforms that do not work, forces a shim.

Thanks! Let me know if you have any more issues. :)

[ricmoo]

I think this is now closed, a few people have confirmed it was fixed for them. If not, please re-open.

Thanks! :)

[yongloon]

I am facing TypeError on React Native.

// Import the required shims
import 'ethers/dist/shims.js';
// Import the ethers library
import { ethers } from 'ethers';

Added those line, the problems still occur
version "4.0.13"

[marcelomorgado]

Same problem
ethers: 4.0.13
expo 2.4.1
react-native: sdk-31.0.0

Do you need more info?

[ricmoo]

Have you added the shims as required?

https://docs.ethers.io/ethers.js/html/cookbook-react.html

[ricmoo]

Ok... I think we've finally put this to bed in 4.0.14. :)

For those interested, @marcelomorgado and I tracked it down to some platforms partially supporting String.prototype.normalize (supported NFC and NFD but not supporting NFKC and NFKD). My guess is on some platforms the Unicode Database for Canonical forms is not included.

The shims will now check that all normalization forms are present and that they work, if this check fails, the shim is added.

Thanks! :)