Error in React Native project with the newly released 11.0.0

mlazari commented 2 weeks ago

Before you begin...

[X] I have searched the existing issues
[X] I am not using version 13.x of node (if so, please upgrade)

Description of the problem

After updating to 11.0.0 in a React Native project I am getting this error:

 ERROR  Error: Unable to resolve module crypto from /Users/mihai/Desktop/Repos/myapp/node_modules/uuid/dist/cjs/rng.js: crypto could not be found within the project or in these directories:
  node_modules
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | exports.default = rng;
> 4 | const crypto_1 = require("crypto");
    |                           ^
  5 | const rnds8Pool = new Uint8Array(256);
  6 | let poolPtr = rnds8Pool.length;
  7 | function rng() {

Looks like it tries to use the crypto module which is not available in a React Native environment. Also I see there were some React Native instructions in README about the need to install react-native-get-random-values that were removed in 11.0.0.

Is 11.0.0 not supported in React Native, or we need to use some additional polyfill for using it?

Recipe for reproducing

- Pull this minimal reproducible example: https://github.com/mlazari/uuidrepro
- Install dependencies with `npm install`
- Run the app with `npm run android` and see the error on app start
- Switch to the v10 branch (which has the previous version 10.0.0 of uuid) and re-run the steps above, see that there are no errors and it's showing an uuid properly

Additional information

No response

Environment

System: OS: macOS 15.0.1 CPU: (8) arm64 Apple M1 Memory: 71.92 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm Watchman: 2024.10.14.00 - /opt/homebrew/bin/watchman Browsers: Chrome: 130.0.6723.70 Safari: 18.0.1 npmPackages: @apollo/client: 3.11.8 => 3.11.8 @babel/core: ^7.26.0 => 7.26.0 @babel/preset-env: ^7.26.0 => 7.26.0 @babel/preset-react: ^7.25.9 => 7.25.9 @babel/runtime: ^7.26.0 => 7.26.0 @invertase/react-native-apple-authentication: 2.4.0 => 2.4.0 @ptomasroos/react-native-multi-slider: 2.2.2 => 2.2.2 @react-native-async-storage/async-storage: 2.0.0 => 2.0.0 @react-native-camera-roll/camera-roll: 7.8.3 => 7.8.3 @react-native-community/cli: 15.0.0 => 15.0.0 @react-native-community/cli-platform-android: 15.0.0 => 15.0.0 @react-native-community/cli-platform-ios: 15.0.0 => 15.0.0 @react-native-community/netinfo: 11.4.1 => 11.4.1 @react-native-community/push-notification-ios: 1.11.0 => 1.11.0 @react-native-firebase/analytics: 15.7.0 => 15.7.0 @react-native-firebase/app: 15.7.0 => 15.7.0 @react-native-firebase/crashlytics: 15.7.0 => 15.7.0 @react-native-firebase/remote-config: 15.7.0 => 15.7.0 @react-native-google-signin/google-signin: 12.2.1 => 12.2.1 @react-native-picker/picker: 2.9.0 => 2.9.0 @react-native/babel-preset: ^0.76.0 => 0.76.0 @react-native/eslint-config: ^0.76.0 => 0.76.0 @react-native/metro-config: ^0.76.0 => 0.76.0 @react-native/typescript-config: ^0.76.0 => 0.76.0 @segment/analytics-react-native: 1.5.3 => 1.5.3 @sentry/react-native: 5.34.0 => 5.34.0 @testing-library/react-hooks: ^8.0.1 => 8.0.1 @testing-library/react-native: ^12.8.0 => 12.8.0 @types/react: ^18.3.12 => 18.3.12 @types/react-test-renderer: ^18.3.0 => 18.3.0 apollo-link-logger: 2.0.1 => 2.0.1 apollo-link-rest: 0.9.0 => 0.9.0 apollo-upload-client: 18.0.1 => 18.0.1 apollo3-cache-persist: 0.15.0 => 0.15.0 async: 3.2.6 => 3.2.6 await-delay: 1.0.0 => 1.0.0 aws-sdk: 2.1691.0 => 2.1691.0 babel-jest: ^29.7.0 => 29.7.0 babel-plugin-module-resolver: ^5.0.2 => 5.0.2 buffer: 6.0.3 => 6.0.3 card-validator: 10.0.0 => 10.0.0 chalk: ^5.3.0 => 5.3.0 cloudinary-core: 2.13.1 => 2.13.1 color: 4.2.3 => 4.2.3 date-fns: 4.1.0 => 4.1.0 debounce: 2.2.0 => 2.2.0 duration-fns: 3.0.2 => 3.0.2 enzyme: ^3.11.0 => 3.11.0 enzyme-adapter-react-16: ^1.15.8 => 1.15.8 events: 3.3.0 => 3.3.0 fbjs: 3.0.5 => 3.0.5 formik: 2.4.6 => 2.4.6 grapheme-splitter: 1.0.4 => 1.0.4 graphql: 16.9.0 => 16.9.0 html-entities: 2.5.2 => 2.5.2 inflected: 2.1.0 => 2.1.0 intl: 1.2.5 => 1.2.5 jest: ^29.7.0 => 29.7.0 jest-enzyme: ^7.1.2 => 7.1.2 keychain: ^1.5.0 => 1.5.0 lodash: 4.17.21 => 4.17.21 lodash.template: 4.5.0 => 4.5.0 lottie-react-native: 7.0.0 => 7.0.0 moment: 2.30.1 => 2.30.1 numeral: 2.0.6 => 2.0.6 patch-package: ^8.0.0 => 8.0.0 pluralize: 8.0.0 => 8.0.0 prettier: ^2.8.8 => 2.8.8 qs: 6.13.0 => 6.13.0 ramda: 0.30.1 => 0.30.1 ramda-extension: 0.12.0 => 0.12.0 react: 18.3.1 => 18.3.1 react-devtools: ^6.0.1 => 6.0.1 react-dom: ^18.3.1 => 18.3.1 react-native: 0.76.0 => 0.76.0 react-native-android-open-settings: 1.3.0 => 1.3.0 react-native-app-link: 1.0.1 => 1.0.1 react-native-appboy-sdk: 1.41.0 => 1.41.0 react-native-braintree-dropin-ui: 1.1.7 => 1.1.7 react-native-branch: 6.3.0 => 6.3.0 react-native-chunk-upload: 2.0.3 => 2.0.3 react-native-code-push: 9.0.0 => 9.0.0 react-native-config: 1.5.3 => 1.5.3 react-native-date-picker: 5.0.7 => 5.0.7 react-native-device-info: 14.0.0 => 14.0.0 react-native-easy-toast: 2.3.0 => 2.3.0 react-native-fbsdk-next: 13.1.3 => 13.1.3 react-native-fit-image: 1.5.5 => 1.5.5 react-native-fs: 2.20.0 => 2.20.0 react-native-gesture-handler: 2.20.2 => 2.20.2 react-native-get-random-values: 1.11.0 => 1.11.0 react-native-iap: 12.15.6 => 12.15.6 react-native-icon-badge: 1.1.3 => 1.1.3 react-native-image-viewer: 0.0.3 => 0.0.3 react-native-image-zoom-viewer: 3.0.1 => 3.0.1 react-native-inappbrowser-reborn: 3.7.0 => 3.7.0 react-native-keep-awake: 4.0.0 => 4.0.0 react-native-keyboard-aware-view: 0.0.14 => 0.0.14 react-native-keyboard-manager: 6.5.16-0 => 6.5.16-0 react-native-linear-gradient: 2.8.3 => 2.8.3 react-native-localize: 3.2.1 => 3.2.1 react-native-permissions: 5.0.2 => 5.0.2 react-native-picker-select: 9.3.1 => 9.3.1 react-native-popover-view: 5.1.9 => 5.1.9 react-native-prompt-android: 1.1.0 => 1.1.0 react-native-push-notification: 8.1.1 => 8.1.1 react-native-rate: 1.2.12 => 1.2.12 react-native-reanimated: 3.16.1 => 3.16.1 react-native-remote-svg: 2.0.11 => 2.0.11 react-native-render-html: 6.3.4 => 6.3.4 react-native-safe-area-context: 4.12.0 => 4.12.0 react-native-screens: 3.35.0 => 3.35.0 react-native-splash-screen: 3.3.0 => 3.3.0 react-native-svg: 15.8.0 => 15.8.0 react-native-svg-transformer: ^1.5.0 => 1.5.0 react-native-swipe-list-view: 3.2.9 => 3.2.9 react-native-swiper: 1.6.0 => 1.6.0 react-native-text-input-mask: 3.2.0 => 3.2.0 react-native-vector-icons: 10.2.0 => 10.2.0 react-native-video: 6.7.0 => 6.7.0 react-native-webview: 13.12.3 => 13.12.3 react-navigation: 4.4.4 => 4.4.4 react-navigation-hooks: 1.1.0 => 1.1.0 react-navigation-stack: 2.10.4 => 2.10.4 react-navigation-tabs: 2.11.2 => 2.11.2 react-test-renderer: ^18.3.1 => 18.3.1 timekeeper: ^2.3.1 => 2.3.1 typescript: ^5.6.3 => 5.6.3 url-parse: 1.5.10 => 1.5.10 uuid: 11.0.0 => 11.0.0 validator: 13.12.0 => 13.12.0 victory-native: 37.3.0 => 37.3.0 yup: 1.4.0 => 1.4.0

broofa commented 2 weeks ago

Can you try following those instructions you linked to, to see if that fixes your issue? If so, I'll restore those in the README.

mlazari commented 2 weeks ago

@broofa I already have those, I started getting this new error after updating from 10.0.0 to 11.0.0. With 10.0.0 and those instructions it works fine.

broofa commented 2 weeks ago

Please flesh out your recipe, above, to conform with the guidelines in https://stackoverflow.com/help/minimal-reproducible-example. That'll allow me to investigate this further.

Edit: specifically, an example on repl.it or a standalone minimal github repo that I can pull and build to reproduce the issue.

mlazari commented 2 weeks ago

@broofa Thanks, I'll add a reproducible example. I investigated it a bit and it looks like in 10.0.0 it doesn't even reach the code in the rng.js file (where the error in 11.0.0 is), it uses rng-browser.js instead which doesn't import "crypto". Probably this line makes it to use that file: https://github.com/uuidjs/uuid/blob/v10.0.0/package.json#L46

mlazari commented 2 weeks ago

@broofa I just updated the description with a minimal reproducible example (a new react-native project created with npx react-native init uuidrepro and uuid added and used in code). In the main branch it's using version 11.0.0 that has the error and in the v10 branch it's the same code using version 10.0.0 that works fine. Let me know if that's all you need and thank you for looking into it.

broofa commented 2 weeks ago

Leaving a breadcrumb here: I'm able to reproduce this issue with a basic hello-world Expo app, as follows (in broad strokes):

Run npx create-expo-app@latest to create a new project ("my-app")
cd my-app
npm install uuid
In app/index.js, add the following:
```
import { v4 } from 'uuid';
```

// (below imports) console.log(v4());


* `npm run ios`

Looks like the issue is that Expo transpiles code to CJS, so needs a `package.json#browser` field to signal where it can find browser builds.

broofa commented 2 weeks ago

@mlazari : Thanks for putting together that repro! Alas, I'm on Mac so ended up trying to run it with npm run ios which isn't working for me for some reason. But as noted above I'm able to run it w/in Expo, which will have to suffice for now.

Anyhow, I've released uuid@11.0.1 which should (🤞 ) fix the problem. Can you give it a try and let me know?

mlazari commented 2 weeks ago

@broofa 11.0.1 fixes the issue, thank you very much!

uuidjs / uuid