React-native-auth0: Unable to resolve module 'crypto' React 0.61.5

[jhazucha]

Description

I have a fresh react-native application with nothing else in it but react-native-auth0 added. I have followed the documentation on their github and auth0 site to the letter. With my iOS emulator as soon as I import Auth0 into the class I receive an error stating:

Unable to resolve module 'crypto' from 'node_modules/crypto-js/core.js' : crypto could not be found within the project.

I have cleared watchman, node_modules and reset yarns cache with no success.

I do see crypto-js was added to the node modules when react-native-auth0 was installed.

Screen Shots

Reproduction

1) create a blank react native project using - react-native init some-project
2) yarn add react-native-auth0
3) pod install
4) add iOS requirements to AppDelegate.m from documentation
5) add iOS requirements to the plist.info file

6) run - react-native run-ios

Environment

"react": "16.9.0",
"react-native": "0.61.5",
"react-native-auth0": "^2.2.0"

[f-roland]

Confirmed. this happens also on earlier versions of RN - I don't think crypto-js is usable in react-native. each time I wanted to use this, I had to use a polyfill.

basically this fails : https://github.com/brix/crypto-js/blob/b60b80ca6b87636b36e4ada3c7d7f19faea65b4a/src/core.js#L26

react native's haste map will try to resolve crypto which is part of the core node.js API, but it won't find it in the haste map, which will trigger this error.

This either requires another library or a polyfill. In the current state of things, I don't think the 2.2.0 release is usable unfortunately (and it breaks apps requiring this lib with ^2.x.x)

For now, we have reverted to use 2.1.1 until this is fixed

[cocojoe]

Thanks for reporting. @lbalmaceda can you pick this up, please.

[lbalmaceda]

This was tested locally with React Native 0.61.2 with and without the Hermes engine enabled and it worked fine on both iOS and Android platforms. I just went through that manual testing again using our quickstart sample, so I'm guessing the latest RN version is not supported right now, oh well... It's no surprise that every new RN release is breaking up things 😬.

Let me migrate the sample app to the version you mentioned to corroborate this issue.

[lbalmaceda]

@k00ksta I couldn't repro it. I just tried all these with our sample app, and they work fine.:

"dependencies": {
    "react": "16.8.1",
    "react-native": "0.61.2",
    "react-native-auth0": "^2.2.0"
  },

Run yarn add [email protected]

"dependencies": {
    "react": "16.8.1",
    "react-native": "0.61.5",
    "react-native-auth0": "^2.2.0"
  },

Run yarn add [email protected]

"dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-auth0": "^2.2.0"
  },

If you can provide more details, happy to look into it.

@f-roland On what version are you encountering that issue? Remember since react-native-auth0 version 2, the minimum required react-native SDK version is 0.60.5.

[jhazucha]

I am not using your sample app.

If you create a new react native project using "react-native init" and yarn add your current library it will fail.

"react": "16.9.0",
"react-native": "0.61.5",
"react-native-auth0": "^2.2.0"

I literally just downgraded my auth0 to 2.1.1 like the other user said and it works perfectly which does not include a node module for crypto-js but uses whatever you use previously.

also you should not only be changing react versions but deleting your node modules folder because you may still have crypto-js or some other dependancy included with that sample app.

I will pull the sample app now and see what is different from a stock react native project.

[f-roland]

@lbalmaceda well, up until 2.1.1, I can guarantee you it works with react-native 0.59.10 :)
You are free to drop support for pre-0.60 but as @k00ksta explained, this was also seen on more recent react-native versions.

did they include a crypto polyfill at some point ? I'm not aware of that but maybe I missed it.

the main issue is you are now relying on a lib that is primarily meant for browsers & node servers. so it has polyfills for the browsers, and uses node's crypto module on servers, but the way the code is written, it is bound to fail on react-native unless the haste resolver can somehow point to some other module to resolve require("crypto")

[cHaLkdusT]

Hi all, Using a bare RN project, I also encountered this issue. As a workaround, I tried using different release versions of crypto-js was able to make it work. I find myself resolving to lower version v3.3.0.

| | Version | Error |
| :--: | :--: | :-- |
| ❌ | v4.0.0 | error: Error: Unable to resolve module crypto from node_modules/crypto-js/core.js: crypto could not be found within the project. |
| ✅ | v3.3.0 | |
| ❌ | v3.2.0 | Error: Native crypto module could not be used to get secure random number.

Summary of my react-native info:

  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.1 => 0.62.1

It seems like this isn't an RN issue but is more of the crypto-js dependency issue.

Hope this helps.

[lbalmaceda]

@cHaLkdusT According to their changelog 3.3.0 is 3.1.9-1. That would make sense since it's the version that we used when testing this. Although no change and no new release would be necessary for this library as ^3.1.9-1 would match 3.3.0 as well.

@k00ksta after installing the right crypto-js version (see above), is this still an issue for you?

[lbalmaceda]

Fixed to 3.3.0 on https://github.com/auth0/react-native-auth0/pull/299. Please, reopen if you encounter more issues after the next release.