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

Just got this surprising error after using uuid for so long

Environment "react-native": "0.63.2" "react-native-get-random-values": "^1.4.0" "uuid": "^8.3.0"

What was tried I get this error when const id = uuidv4() runs. I added “react-native-get-random-values” as suggested, but with yarn and imported it this way;

import React, {useState} from 'react'; import 'react-native-get-random-values'; import {v4 as uuidv4} from 'uuid'; import RNPickerSelect from 'react-native-picker-select';

I am still getting the same error. Have to figure out other ways to generate a random ID then.

[Clear, concise description of the problem]

How to reproduce

  1. Install the uuid and react-native-get-random-values
  2. try running a component with this const id = uuidv4()

Expected behavior

Should generate random ids

Runtime

  • OS: macOS
  • Runtime: react-native
  • Runtime Version: 0.63.2

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 4
  • Comments: 24 (12 by maintainers)

Commits related to this issue

Most upvoted comments

As mentioned in the documentation and as shown in the working example react-native-get-random-values must be imported before uuid is imported (or, in the case of your app, before App.js is imported, just like it’s done here).

I’ve submitted a PR to your sample repo which hopefully fixes the issue chinomnsoawazie/dogstagram-frontweb-mobile#1 (I couldn’t properly test it because I couldn’t get past the login screen, I was able to produce a uuid on the login screen though using this commit: ctavan/dogstagram-frontweb-mobile@efac2b8).

I think the most important line in your last comment is “react-native-get-random-values must be imported before uuid is imported (or, in the case of your app, before App.js)”. The documentation as it is right now is not very clear on that, especially, the part that says…

“getRandomValues() not supported” This error occurs in environments where the standard crypto.getRandomValues() API is not supported. This issue can be resolved by adding an appropriate polyfill:

React Native

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

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

Cursory reading of that makes one think that will work in the component where uuid will be used, but it doesn’t. More clarity on where, and in what order would help, eg specifically stating this has to be done in index.js and it has to be imported before App.js. Also highlighting the fact that in fixing this issue through importing react-native-get-random-values in index.js, it needs to be imported before the App.js component might help. In your example, you might also want to add a comment to reflect that specific situation. I know it is on the main page, but someone looking for a quick fix might miss that specific requirement. I have submitted an issue to that particular page in your example repo.

I have implemented a polyfill for randomUUID() Node.js and upcoming WICG standard at https://github.com/uuidjs/randomUUID 😃

Today i use rollup to build and run into the same issue. After a long time of troubleshooting, i find words in https://www.npmjs.com/package/@rollup/plugin-node-resolve this plugin looks for the ['default', 'module', 'import'] conditions when resolving imports.

Then, i check the uuid's package.json, find that default": "./dist/esm-browser/index.js in exports field. Finally i set @rollup/plugin-node-resolve 's exportConditions property to ['node'], solve the problem.😄

LiquidPlayer, which is a V8 based JS VM, just like NodeJS… in rng-browser.js?

@here-nerd : I’m not familiar with LiquidPlayer but it looks like it’s a Node.js runtime (variant). As such it shouldn’t be using the package.json#browser aliases. I.e. it should be loading rng.js, not rng-browser.js. And rng.js already does require('crypto').

Maybe check to make sure your packager is bundling for the correct target environment. For example.

As mentioned in the documentation and as shown in the working example react-native-get-random-values must be imported before uuid is imported (or, in the case of your app, before App.js is imported, just like it’s done here). I’ve submitted a PR to your sample repo which hopefully fixes the issue chinomnsoawazie/dogstagram-frontweb-mobile#1 (I couldn’t properly test it because I couldn’t get past the login screen, I was able to produce a uuid on the login screen though using this commit: ctavan/dogstagram-frontweb-mobile@efac2b8).

I think the most important line in your last comment is “react-native-get-random-values must be imported before uuid is imported (or, in the case of your app, before App.js)”. The documentation as it is right now is not very clear on that, especially, the part that says…

“getRandomValues() not supported” This error occurs in environments where the standard crypto.getRandomValues() API is not supported. This issue can be resolved by adding an appropriate polyfill:

React Native

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

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

Cursory reading of that makes one think that will work in the component where uuid will be used, but it doesn’t. More clarity on where, and in what order would help, eg specifically stating this has to be done in index.js and it has to be imported before App.js. Also highlighting the fact that in fixing this issue through importing react-native-get-random-values in index.js, it needs to be imported before the App.js component might help. In your example, you might also want to add a comment to reflect that specific situation. I know it is on the main page, but someone looking for a quick fix might miss that specific requirement. I have submitted an issue to that particular page in your example repo.

This solution works on me

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

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

As mentioned in the documentation and as shown in the working example react-native-get-random-values must be imported before uuid is imported (or, in the case of your app, before App.js is imported, just like it’s done here).

I’ve submitted a PR to your sample repo which hopefully fixes the issue https://github.com/chinomnsoawazie/dogstagram-frontweb-mobile/pull/1 (I couldn’t properly test it because I couldn’t get past the login screen, I was able to produce a uuid on the login screen though using this commit: https://github.com/ctavan/dogstagram-frontweb-mobile/commit/efac2b865a3dc709a97c348253ffc885c2dfde3d).

The expo-related issue from #375 is clearly understood and reproducible. If you are seeing the same error on a non-expo react native app it must be a different issue, as https://github.com/ctavan/uuid-example-react-native proves that it is well possible to use uuid in combination with react-native-get-random-values on plain react native apps.

Please provide a Minimal Reproducible Example, otherwise I simply don’t have enough information about your specific setup in order to further debug this.