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

[joebernard]

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"

[joebernard]

This only seems to be a problem when running in debug mode. In a release build it works.

[joebernard]

Seems to only affect debug builds in the iOS simulator. Running on device with debug or release build works fine. But debug mode on simulator throws the errors.

Simulator is 11 Pro Max with iOS 13.4

[ctavan]

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

[Slapbox]

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

~~This previously worked without any issue on [email protected]. The issue occurs in [email protected] ~~ Correction: I was previously using [email protected] with [email protected]

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

[ctavan]

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?

[Slapbox]

@ctavan the first thing that stands out, which I meant to mention, is that we're using the Expo version of React Native, so we can't easily set that up to test unfortunately.

Maybe this is the issue with Expo, but that doesn't seem to explain the trouble @joebernard is having.

[ctavan]

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.

[joebernard]

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.

[ctavan]

Glad to hear! If there's further trouble please feel free to open a new issue.

[danstepanov]

So I get this issue when trying to run via vscode debugger but not when running directly via the react-native cli.

Update: stopping the debugger after running via vscode seems to remove the issue.

Issue

Runtime

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

vscode launch.json

{
 "configurations": [{
         "name": "Debug iOS",
         "cwd": "${workspaceFolder}",
         "type": "reactnative",
         "request": "launch",
         "platform": "ios",
         "target": "iPad Pro (12.9-inch) (2nd generation) (13.0)"
     }

 ]}

Yarn cli

react-native run-ios --simulator 'iPad Pro (12.9-inch) (2nd generation) (13.0)'

Both methods run in debug, as far as I know

[LinusU]

I thought that when running under Chrome there would already be a global crypto object with getRandomValues, but apparently not. This needs some investigation, hopefully I'll get time for this soon, but in the meantime if anyone wants to help out it would be great if they could figure out if there is any way to access the native crypto.getRandomValues when running inside Chrome.

[ctavan]

Possibly this is an actual bug in react-native: https://github.com/facebook/react-native/issues/26705

[ctavan]

Ah no, I was reading that issue in a wrong way. We'll probably have to fix this in react-native-get-random-values in a similar way like here: https://github.com/facebook/react-native/commit/4fd9c9d544d741fb2df3ad849dfa4bdf4719ccf4

[ctavan]

OK, I gave this a quick try and global.crypto is indeed undefined in the debug mode. Not sure how to proceed from here. Provide a Math.random()-based fallback in the case of async debugging? Sounds somehow wrong…

[LinusU]

Hmm, if we guard it behind the double ifs as they do I guess that we could possibly fall back to an insecure implementation 🤔

     if (__DEV__) {
       if (isAsyncDebugging) {
         // Hard code light theme when using the async debugger as
         // sync calls aren't supported
         return 'light';
       }
     }

But yeah, it feels a bit dirty, any other solutions or ideas would be very welcome!

[alexanderblackh]

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.

[ctavan]

@alexanderblackh unfortunately I still have a hard time reproducing this issue since I'm not familiar with VS Code. Could you provide more detailed steps to reproduce so that I can try to further investigate the issue? Ideally using https://github.com/ctavan/uuid-example-react-native as a reproduction repo. Thanks!

[seralexeev]

@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');
}

[ctavan]

@alexanderblackh @seralexeev what version of react-native-get-random-values are you using?

It looks like the workaround proposed by @seralexeev should already be part of [email protected].

Could you try it with the latest version of react-native-get-random-values and report if that solved the issue?

[alexanderblackh]

@seralexeev @ctavan Sorry for delay in response.

Tried both of those solutions in the RN app, not only is it not working, but it seems this isn't working in the Release build period, any page using it crashes outright (it does work in a debug build however, just not with the VSCode debugger attached). Import and censored usage is as follows:

// React and React Native
import React, { useState, useEffect, useCallback } from "react"; // required as a polyfill for uuid. See info here: https://github.com/uuidjs/uuid#getrandomvalues-not-supported
import "react-native-get-random-values"; // required as a polyfill for uuid. See info here: https://github.com/uuidjs/uuid#getrandomvalues-not-supported
import { v4 as uuidv4 } from "uuid";

// Project components
import { Formik } from "formik";

export interface FeedbackSubmissionProps {
  navigation: any;
  route: any;
}

export default function FeedbackSubmission(props: FeedbackSubmissionProps) {
  const feedbackUUID = uuidv4();

  return (
    <Page
      contentContainerStyle={{ justifyContent: "flex-start" }}
      key="Whole Form">
      <Formik
        initialValues={{
          id: feedbackUUID,
          summary: "",
          description: "",
        }}
        // validationSchema={ReviewSchema}
        onSubmit={(values, { resetForm }) => {
          // console.log(values);
          dispatch(storeFeedback(values, "feedback"));
          resetForm({});
        }}>
        <FormBody />
      </Formik>
    </Page>
  );
}

Using uuidjs 7.0.3 and get-random-values 1.40

[ctavan]

@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)),
    };
}

[osvald0]

Are there any news about this issue?

[ctavan]

No news, but I also don't know how to reproduce this issue. If anyone can provide a reproduction case and exact steps to reproduce I'm happy to have a look.

[osvald0]

No news, but I also don't know how to reproduce this issue. If anyone can provide a reproduction case and exact steps to reproduce I'm happy to have a look.

I’ve updated my project to the last react and react-native version and everything works fine now.

[edolix]

@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!

[ctavan]

@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?

[joebernard]

@ctavan Unfortunately I still have this issue.

Error: crypto.getRandomValues() not supported.

"react-native": "0.62.2",
"react-native-get-random-values": "^1.4.0",
"uuid": "^8.2.0"

[ctavan]

That's sad to hear. Could you give me the exact steps to reproduce to activate debug mode, @joebernard? I'm not a react-native pro, sorry!

[Slapbox]

@joebernard do you get the error with _and_ without debugging mode on? React Native is weird as hell sometimes with stuff like that, so asking for completeness' sake since at least one person now has it working.

Also, what OS?

[joebernard]

@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.

[amhinson]

Also, don't forget to link react-native-get-random-values like I did :)

[Slapbox]

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

[amhinson]

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

Good callout! cc @brentvatne

[ctavan]

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

[alexanderblackh]

Sorry for the disappearing act.

Can't speak about Expo, but in vanilla React Native, I got it working again after making various other changes and then it just started working fully, including in release builds. If you get this error, I'm pretty sure it's a result of something else breaking and it causing havoc throughout the app, but I can't confirm. If I get it again, I'll report back with vastly more details.

[ortonomy]

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?

[ctavan]

@ortonomy I believe this is something that would rather belong to https://github.com/LinusU/react-native-get-random-values since the uuid library doesn't do any react-native specific stuff. Would you mind opening an issue over there?

[ortonomy]

@ctavan -- for sure, I'd be happy to do it. It's starting to become an annoyance.

[kiran-kumar011]

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.

[cristianoccazinsp]

@kiran-kumar011 how did you solve it? Same issue with RealmJS: https://github.com/realm/realm-js/issues/3714

[edihasaj]

React Native

Install react-native-get-random-values
Import it before uuid:

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