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
- Install the uuid and react-native-get-random-values
- 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
- Fix uuid usage Import react-native-get-random-values _before_ importing App (which in turn imports uuid). As documented in https://github.com/uuidjs/uuid#react-native Fixes https://github.com/uuidjs... — committed to ctavan/dogstagram-frontweb-mobile by ctavan 4 years ago
- docs: be explicit about react native import order Fixes #514 — committed to uuidjs/uuid by ctavan 4 years ago
- docs: be explicit about react native import order Fixes #514 — committed to uuidjs/uuid by ctavan 4 years ago
- docs: be explicit about react native import order (#518) Fixes #514 — committed to uuidjs/uuid by ctavan 4 years ago
- Merge pull request #7 from rag3trey/patch-1 move uuid to external module to fix https://github.com/uuidjs/uuid/issues/514 — committed to EosFoundry/makeshift-ctrl by EosFoundry 9 months ago
I think the most important line in your last comment is “
react-native-get-random-valuesmust 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
react-native-get-random-valuesuuid: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
uuidwill be used, but it doesn’t. More clarity on where, and in what order would help, eg specifically stating this has to be done inindex.jsand it has to be imported beforeApp.js. Also highlighting the fact that in fixing this issue through importingreact-native-get-random-valuesinindex.js, it needs to be imported before theApp.jscomponent 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 thatdefault": "./dist/esm-browser/index.jsinexportsfield. Finally i set @rollup/plugin-node-resolve 'sexportConditionsproperty to['node'], solve the problem.😄@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#browseraliases. I.e. it should be loading rng.js, not rng-browser.js. And rng.js already doesrequire('crypto').Maybe check to make sure your packager is bundling for the correct target environment. For example.
This solution works on me
As mentioned in the documentation and as shown in the working example
react-native-get-random-valuesmust be imported beforeuuidis imported (or, in the case of your app, beforeApp.jsis 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
uuidin combination withreact-native-get-random-valueson 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.