Could not resolve "crypto"

[davydspotnana]

error when build nanoid:

✘ [ERROR] Could not resolve "crypto"

    node_modules/nanoid/index.js:1:19:
      1 │ import crypto from 'crypto'
        ╵                    ~~~~~~~~

[oblador]

Crypto is a node builtin not available in browser or react-native. Did you try the esm resover plugin mentioned in the docs?

[davydspotnana]

Yes, I've added esmCustomMainFieldResolverPlugin

https://github.com/oblador/react-native-esbuild#flow-syntax-errors-such-as-expected-from-but-found-

[oblador]

Yeah that's weird, it's quite possible I need to add some extra things to that plugin, but when i try the same code with metro I get the same error ReferenceError: Can't find variable: crypto.

[oblador]

Which version of nanoid are you on? What exact code are you running?

[oblador]

I googled and i found that adding and importing react-native-get-random-values solved my issues on both metro and esbuild as per documentation: https://github.com/ai/nanoid#react-native

[davydspotnana]

I checked a package.json and seem nanoid has a specific resolving configuration for react-native

[oblador]

I know, that is supported: https://github.com/oblador/react-native-esbuild/blob/master/src/esbuild-config.js#L35

[oblador]

Try adding the polyfill and bumping to latest version

[davydspotnana]

I googled and i found that adding and importing react-native-get-random-values solved my issues on both metro and esbuild as per documentation: https://github.com/ai/nanoid#react-native

I checked, our index.js and yes, we added react-native-get-random-values

[oblador]

I think I’ll need a minimal reproduction of this error. Small project that works with metro but fails with esbuild. All works fine for me

[oblador]

Closing due to lack of replies

[FashMuyhee]

@oblador Currently facing similar issue on a new react-native init project the above image is the error i got

react-native.config.js file

const { createEsbuildCommands, esmCustomMainFieldResolverPlugin, } = require('react-native-esbuild');
const commands = createEsbuildCommands(({ plugins, ...rest }) => ({
  ...rest,
  plugins: plugins.concat(esmCustomMainFieldResolverPlugin()),
}));

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ["./src/assets/fonts/"],
  commands,
};

packag.json

"scripts": {
    "android": "react-native run-android --no-packager",
    "ios": "react-native run-ios --no-packager",
    "start": "react-native esbuild-start",
    "test": "jest",
    "lint": "eslint .",
    "adb-connect": "adb reverse tcp:8081 tcp:8081"
  },
  "dependencies": {
    "esbuild": "^0.15.9",
    "react": "18.1.0",
    "react-native": "0.70.1",
    "react-native-esbuild": "^0.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.70.0",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.72.1",
    "react-test-renderer": "18.1.0",
    "typescript": "^4.8.3"
  },