uuid: React Native: crypto.getRandomValues() is not available when debugging with Chrome

Describe the bug

My React Native project has been using uuid for a while with no problem. I upgraded to v7 and installed react-native-get-random-values. I added import 'react-native-get-random-values'; and changed my uuid import to import {v4 as uuidv4} from 'uuid'; I cleaned the build in Xcode, deleted derived data, cleared watchman and metro cache, reinstalled all node modules, and ran pod install.

I still get this error:

Error: crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported

I also tried moving the react-native-get-random-values import to my index.js per this comment but then got this error:

Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.

Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.

To Reproduce

I followed instructions in the readme.

Expected behavior

Generate uuid.

Runtime

React Native

"react-native": "0.61.5",
"react-native-get-random-values": "^1.3.1",
"uuid": "^7.0.3"

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 29
  • Comments: 48 (17 by maintainers)

Most upvoted comments

@ctavan @Slapbox I was missing import 'react-native-get-random-values'; in index.js. It works now, thanks for the help. I will close this issue.

I think I fixed it in my project. I upgraded React Native from 0.61.5 to the latest version 0.62.1 and the error went away. I’m not set up for Android development so that may have to be tested separately but my immediate issue is solved.

From uuid npm docs. This resolves it.

Screenshot 2022-01-18 at 10 18 40

React Native

Install react-native-get-random-values
Import it before uuid:
import 'react-native-get-random-values';
import { v4 as uuidv4 } from 'uuid';

What I did :

Install uuid
Install react-native-get-random-values

then

import 'react-native-get-random-values';
import { v4 as uuidv4 } from 'uuid';

then

  • delete the app
  • npx pod-install
  • reinstall the app

This sounds really strange. @joebernard @Slapbox would you mind trying out https://github.com/ctavan/uuid-example-react-native (which “works on my machine™”, at least for iOS) and see if you can find any differences to your code base?

Ok, what you should do is: if you are using React Native CLI:

  1. npm i npm install uuid
  2. npm i react-native-get-random-values
  3. cd ios/ && pod install
  4. import 'react-native-get-random-values'; in the index.js
  5. import {v4 as uuidv4} from 'uuid'; where you want to use.

This issue exists also for Android React Native. The issue exists with or without debugging enabled.

~~This previously worked without any issue on react-native@0.59.8. The issue occurs in react-native@0.61.4 ~~ Correction: I was previously using uuid@3.3.2 with react-native@0.59.8

Current version may need to polyfill crypto as mentioned in https://github.com/auth0/react-native-auth0/issues/276#issuecomment-585136528

Also, don’t forget to link react-native-get-random-values like I did 😃

@ctavan I’ve tried now the following steps to test and got the error:

Creates a new fresh app and install uuid.

npx react-native init RNUuidTest --template react-native-template-typescript
cd RNUuidTest
npm install uuid @types/uuid
npm run android

In App.tsx i printed some uuidv4() using

import { v4 as uuidv4 } from 'uuid'

// in App component
<Text>{uuidv4()}</Text>

Running the app on Android device: crypto.getRandomValues() not supported.

My dependencies:

  "dependencies": {
    "@types/uuid": "^8.0.0",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "uuid": "^8.2.0"
  },

Thanks!

I was facing the same issue in my project because of using realm. If the main realm instance is not instantiated before using any methods in realm it was causing this issue. similarly some packages are not instantiated due to which this issue might occur.

Unfortunately no progress so far, but feel free to give your 👍 to https://github.com/expo/expo/issues/7209 @amhinson @Slapbox @benjreinhart

@alexanderblackh did you try the manual workaround described here: https://github.com/uuidjs/uuid/issues/416#issuecomment-635844939 ? Something like:

if (__DEV__ && typeof global.crypto !== 'object') {
    global.crypto = {
        getRandomValues: (array: any[]) => array.map(() => Math.floor(Math.random() * 256)),
    };
}

@alexanderblackh As a temporary solution that helped me, you can do this.

declare var global: any;

if (__DEV__ && typeof global.crypto !== 'object') {
    global.crypto = {
        getRandomValues: (array: any[]) => array.map(() => Math.floor(Math.random() * 256)),
    };
} else {
    require('react-native-get-random-values');
}

Any update on this? A client app is near completion but I can’t use the VS Code debugger nearly at all until this is solved.

Oh, if you are running expo then you will indeed run into the problem described here.

The best thing you can do is to chime in over at https://github.com/expo/expo/issues/7209 and express your support for adding this feature to expo.

It’s true that @joebernard’s issue might be a different one (regarding debug mode) and we’ll have to investigate further.

Thanks for the report! @LinusU can you look into this?

@Nantris So expo-crypto is a sort of port of the standard node crypto library, meaning that it should be the exact same since react-native-get-random-values is just a port of Crypto.getRandomValues, and expo-crypto includes that

For those using expo: expo has its own library called expo-crypto that you should use unless you really need something else

I got this error today and I could only get it working by manually running npx react-native link — is there something borked in the autolinking of one of these libs?

I hope the Expo team is planning to link react-native-get-random-values if it’s not already.

Good callout! cc @brentvatne

@edolix you need a polyfill, did you follow https://github.com/uuidjs/uuid#react-native ?

@osvald0 great to hear!

@joebernard does upgrading to latest react-native, uuid and react-native-get-random-values solve the original problem for you as well?