crypto module missing on react native app

[davide99]

Subject of the issue

I'm trying to use the sdk in a react native app. Since the react native doesn't include the node standard library the following error pops up:
The package at "node_modules/algosdk/dist/browser/algosdk.min.js" attempted to import the Node standard library module "crypto".

Steps to reproduce

1. npx create-expo-app app
2. cd app
3. const algosdk = require('algosdk'); in a js file
4. npm start

Is there a way to fix this?
Thank you

[jasonpaulos]

Unfortunately React Native is not a supported environment for this library.

Prior issues have been made that may or may not have helpful workarounds, e.g. #530

[barnjamin]

Another dev ran into a similar issue and wrote up his experience here: https://medium.com/@shrinerp/algosdk-vue-js-webpack-and-node-js-d10014e87a55

[Blackglade]

Getting this exact same issue with create-react-app as well.

Compiled with problems:X

ERROR in ./node_modules/algosdk/dist/browser/algosdk.min.js 7206:55-72

Module not found: Error: Can't resolve 'crypto' in '/Users/harshbaid/Desktop/algoranddao/node_modules/algosdk/dist/browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

[jasonpaulos]

Getting this exact same issue with create-react-app as well.

@Blackglade you are seeing that because one of our dependencies, tweetnacl-js, uses require('crypto') to test if the Node.js crypto module is available. However, it is perfectly capable of running in a browser that does not have access to the crypto module, it just has to check which environment it's in, then fall back on browser functions if necessary.

This is at odds with your React webpack build, which thinks there must be a problem because it doesn't know about the crypto module. You must find some way of telling your React build that it's ok to not have that module. Consider modifying your webpack config to do this, possibly with the resolve.fallback option, e.g.:

module.exports = {
  //...
  resolve: {
    fallback: {
      crypto: false, // do not include a polyfill for crypto
    },
  },
};

If you are aware of any better way this issue can be solved, please let us know.

[Blackglade]

Yup @jasonpaulos I was able to get around this fairly easily, but it's still a hassle given the fact that I'm using create-react-app which makes editing it's webpack config impossible unless I eject all the scripts. Please see my comments here: #645

[davide99]

I will try @barnjamin solution, it sounds pretty promising. I will keep you up to date.
Thank you

Edit

Can't really use @barnjamin solution, since react native projects don't have a webpack.config.js.
Currently following @jasonpaulos thread, new updates incoming

Update 1
New error: The package at "node_modules/browserify-sign/node_modules/readable-stream/lib/_stream_readable.js" attempted to import the Node standard library module "events".

Update 2

• npm install --save react-native-events --legacy-peer-deps
• added a new alias in babel.config.js: events: 'react-native-events'

New error from the expo go app: No identifiers allowed directly after numeric literal, no stack

I think I'm gonna take a break now.

[davide99]

I finally got it working:

1. npm install expo-crypto-polyfills
2. create a metro.config.js file in your root directory
3. write this: module.exports = { resolver: { extraNodeModules: require("expo-crypto-polyfills") }, };
4. npm install react-native-get-random-values
5. go to you App.js
6. add as its first line import 'react-native-get-random-values';

(Not sure if this is the best solution)

[jasonpaulos]

I just wanted to say that I've opened #707, which should fix the error about a missing crypto package without any additional configuration by users.