Braintree-web: Can't resolve 'crypto' (Angular 6)

[MrBlaise]

General information

• SDK version: 3.33.0
• Environment: Sandbox and Production (Angular)
• Browser and OS: All

Issue description

When trying to build an angular 6 application that uses braintree-web it will print out the following warning.

WARNING in ./node_modules/braintree-web/data-collector/vendor/sjcl.js
Module not found: Error: Can't resolve 'crypto' in '/REDACTED/node_modules/braintree-web/data-collector/vendor'

Angular 6 removed the shims to support non browser (node) libraries. What can be done in this case?

[crookedneighbor]

From what I can tell, looking at the Stanford JavaScript Crypto Library, requiring the crypto module is done in such a way that if it fails to require it, it falls back to the browser's implementation.

So while the warning is annoying, I don't think you should have trouble with it. Are you experiencing any issues?

[MrBlaise]

I see. I don't have any particular issue with it, but I haven't done any thorough testing yet. I'll comment if I notice something. Hopefully the warning can be suppressed somehow.

[crookedneighbor]

I'm going to close this for now, but feel free to open an issue on sjcl and we'll update our vendored sjcl library if they make an adjustment for Angular v6.

[MatissJanis]

I'm experiencing the same issue.

Can this warning be
a) surpassed, if it doesn't break Braintree integration or;
b) fixed?

[crookedneighbor]

This is not being caused by Braintree. It's happening with SJCL. It'd be best to open up an issue there. If it's resolved there, we can update the SJCL library that Braintree uses.

[Fran-UXS]

when will it be fixed ?

[crookedneighbor]

@Fran-UXS You're best bet is to comment on the issue that @MrBlaise opened up here: https://github.com/bitwiseshiftleft/sjcl/issues/362

[crookedneighbor]

I'm gonna see if there's an reasonable way to accomodate y'all in the library as is. In the mean time, you can use the built script tags instead of npm.

[crookedneighbor]

I think I've found a solution for this. Will keep y'all updated.

[crookedneighbor]

v3.36.0 on npm includes a browser property in the package.json that points to a browserified version of the file. Webpack should use this path instead and this should fix the issues with Angular 6. Please update and comment here if you're still having issues.

[MatissJanis]

Works like a charm. Thanks! 🎉

[prasannasaikommineni]

facing the same issue. can someone tell me what are the exact lines that I need to change to resolve this issue in my code .

[crookedneighbor]

@prasannasaikommineni Upgrade the package version to 3.36.0

Then in your code, reference:

import braintree from 'braintree-web';

Note, at this time, you can't import the pieces separately:

import client from 'braintree-web/client';
import hostedFields from 'braintree-web/hosted-fields';
import dataCollector from 'braintree-web/data-collector;

^ If you do that, it'll use the raw version and not the pre-bundled version of the files.

I'm working on seeing if I can configure it to work with that kind of import. I'll re-open this issue while I see if that's viable.

[crookedneighbor]

Starting in v3.37.0, you should be able to import the components directly. Going to close this now, but feel free to comment here if y'all are still having issues.

[zaharafirespotter]

I opened a new issue, https://github.com/braintree/braintree-web/issues/390, but it might be a duplicate of this issue. I'm seeing a 'crypto' error when loading only the client and data-collector components of the sdk.