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

joebernard · 2020-04-05T22:02:48Z

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"

The text was updated successfully, but these errors were encountered:

joebernard · 2020-04-05T22:18:34Z

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

joebernard · 2020-04-06T00:49:52Z

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 · 2020-04-06T06:18:27Z

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

Nantris · 2020-04-06T22:39:48Z

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 auth0/react-native-auth0#276 (comment)

ctavan · 2020-04-07T14:40:33Z

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?

Nantris · 2020-04-07T17:19:58Z

@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 · 2020-04-07T17:53:29Z

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 expo/expo#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 · 2020-04-07T18:49:41Z

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 · 2020-04-07T19:47:01Z

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

danstepanov · 2020-04-08T21:28:44Z

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 · 2020-04-09T08:30:03Z

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 · 2020-04-09T12:41:44Z

Possibly this is an actual bug in react-native: facebook/react-native#26705

ctavan · 2020-04-09T12:46:52Z

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: facebook/react-native@4fd9c9d

ctavan · 2020-04-09T13:03:30Z

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 · 2020-04-09T13:20:34Z

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 · 2020-05-29T01:42:44Z

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 · 2020-05-29T07:15:02Z

@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 · 2020-05-29T08:28:12Z

@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 · 2020-05-29T11:43:07Z

@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 react-native-get-random-values@1.4.0.

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

alexanderblackh · 2020-06-02T13:22:19Z

@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 · 2020-06-03T14:23:05Z

@alexanderblackh did you try the manual workaround described here: #416 (comment) ? Something like:

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

osvald0 · 2020-06-19T23:55:56Z

Are there any news about this issue?

ctavan · 2020-06-23T14:38:07Z

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 · 2020-06-26T14:56:17Z

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 · 2020-06-27T16:45:54Z

@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 · 2020-06-27T18:19:26Z

@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 · 2020-06-28T16:26:07Z

@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 · 2020-06-28T19:22:29Z

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!

Nantris · 2020-06-28T20:25:03Z

@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 · 2020-06-29T18:46:01Z

@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 · 2020-07-09T19:03:20Z

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

Nantris · 2020-07-09T19:23:47Z

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

amhinson · 2020-07-09T19:26:10Z

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

Good callout! cc @brentvatne

ctavan · 2020-07-09T20:22:06Z

Unfortunately no progress so far, but feel free to give your 👍 to expo/expo#7209 @amhinson @slapbox @benjreinhart

alexanderblackh · 2020-07-11T17:17:39Z

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 · 2020-07-14T08:28:00Z

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 · 2020-07-14T08:52:26Z

@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 · 2020-07-16T08:22:36Z

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

kiran-kumar011 · 2021-05-03T17:59:29Z

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 · 2021-05-05T21:58:57Z

@kiran-kumar011 how did you solve it? Same issue with RealmJS: realm/realm-js#3714

edihasaj · 2021-06-23T10:11:10Z

React Native

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

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

dexiouz · 2022-01-18T00:45:51Z

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

pierguinzani · 2022-01-18T10:14:15Z

@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 react-native-get-random-values@1.4.0.

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

I followed the steps in the Readme and it worked. I believe from uuid version 3.3 to 7+ version you need react-native-get-random-values library

dexiouz · 2022-01-18T10:20:17Z

From uuid npm docs. This resolves it.

AcxelAmbrosi · 2022-08-25T21:58:13Z

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

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

qoobes · 2024-04-10T14:49:42Z

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

Nantris · 2024-04-11T19:54:05Z

@qoobes thanks for sharing! Quick question:

We've been using the react-native-get-random-values for years now. Do you know how expo-crypto might differ and if there'd be some benefit for us to switch to it?

qoobes · 2024-04-12T10:03:17Z

@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

ctavan assigned LinusU Apr 6, 2020

ctavan closed this as completed Apr 7, 2020

ctavan reopened this Apr 9, 2020

LinusU changed the title ~~Error: crypto.getRandomValues() not supported~~ React Native: crypto.getRandomValues() is not available when debugging with Chrome Apr 9, 2020

LinusU mentioned this issue Apr 9, 2020

Version >=7.0.0 is not compatible with React Native / Expo #375

Closed

joebernard closed this as completed Jun 29, 2020

ospfranco mentioned this issue Aug 23, 2020

Add support for macOS LinusU/react-native-get-random-values#14

Merged

JeffGuKang mentioned this issue Sep 9, 2020

[addon] addon-actions is not working v6.0.21 storybookjs/react-native#104

Closed

numandev1 mentioned this issue Nov 15, 2021

error in compressing video in react native v0.65.1 numandev1/react-native-compressor#31

Closed

Kei-Neurio mentioned this issue Jun 16, 2022

[React-Native] triggers uuid crash when feature with impression data enabled is used with isEnabled Unleash/unleash-proxy-client-js#87

Closed

MuratAkbaba006 mentioned this issue Jul 1, 2022

Realm works only in debug mode realm/realm-js#4692

Closed

Joelasaur mentioned this issue Oct 27, 2022

SyntaxError: Cannot use import statement outside a module LinusU/react-native-get-random-values#23

Open

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

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

Comments

joebernard commented Apr 5, 2020

Describe the bug

To Reproduce

Expected behavior

Runtime

joebernard commented Apr 5, 2020

joebernard commented Apr 6, 2020

ctavan commented Apr 6, 2020 • edited Loading

Nantris commented Apr 6, 2020 • edited Loading

ctavan commented Apr 7, 2020

Nantris commented Apr 7, 2020

ctavan commented Apr 7, 2020

joebernard commented Apr 7, 2020

ctavan commented Apr 7, 2020

danstepanov commented Apr 8, 2020 • edited Loading

Issue

Runtime

vscode launch.json

Yarn cli

LinusU commented Apr 9, 2020

ctavan commented Apr 9, 2020

ctavan commented Apr 9, 2020

ctavan commented Apr 9, 2020

LinusU commented Apr 9, 2020 • edited Loading

alexanderblackh commented May 29, 2020

ctavan commented May 29, 2020

seralexeev commented May 29, 2020

ctavan commented May 29, 2020

alexanderblackh commented Jun 2, 2020 • edited Loading

ctavan commented Jun 3, 2020

osvald0 commented Jun 19, 2020

ctavan commented Jun 23, 2020

osvald0 commented Jun 26, 2020

edolix commented Jun 27, 2020

ctavan commented Jun 27, 2020

joebernard commented Jun 28, 2020

ctavan commented Jun 28, 2020

Nantris commented Jun 28, 2020 • edited Loading

joebernard commented Jun 29, 2020

amhinson commented Jul 9, 2020

Nantris commented Jul 9, 2020

amhinson commented Jul 9, 2020

ctavan commented Jul 9, 2020

alexanderblackh commented Jul 11, 2020

ortonomy commented Jul 14, 2020

ctavan commented Jul 14, 2020

ortonomy commented Jul 16, 2020

kiran-kumar011 commented May 3, 2021

cristianoccazinsp commented May 5, 2021

edihasaj commented Jun 23, 2021

dexiouz commented Jan 18, 2022

pierguinzani commented Jan 18, 2022

dexiouz commented Jan 18, 2022

AcxelAmbrosi commented Aug 25, 2022

qoobes commented Apr 10, 2024

Nantris commented Apr 11, 2024

qoobes commented Apr 12, 2024 • edited Loading

ctavan commented Apr 6, 2020 •

edited

Loading

Nantris commented Apr 6, 2020 •

edited

Loading

danstepanov commented Apr 8, 2020 •

edited

Loading

LinusU commented Apr 9, 2020 •

edited

Loading

alexanderblackh commented Jun 2, 2020 •

edited

Loading

Nantris commented Jun 28, 2020 •

edited

Loading

qoobes commented Apr 12, 2024 •

edited

Loading