KeyDIDProvider is not usable in browser, missing crypto dep

[cre8]

Bug severity 4

Describe the bug When including the Provider into a react native application, I get multiple errors because of the missing crypto library

WARNING in ./node_modules/factory.ts/lib/shared.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mimo/Projects/VeramoMobile/node_modules/factory.ts/src/shared.ts' file: Error: ENOENT: no such file or directory, open '/home/mimo/Projects/VeramoMobile/node_modules/factory.ts/src/shared.ts'

WARNING in ./node_modules/factory.ts/lib/sync.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mimo/Projects/VeramoMobile/node_modules/factory.ts/src/sync.ts' file: Error: ENOENT: no such file or directory, open '/home/mimo/Projects/VeramoMobile/node_modules/factory.ts/src/sync.ts'

ERROR in ./node_modules/@transmute/secp256k1-key-pair/dist/secp256k1-key-pair.esm.js 4:0-28
Module not found: Error: Can't resolve 'crypto' in '/home/mimo/Projects/VeramoMobile/node_modules/@transmute/secp256k1-key-pair/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

web compiled with 1 error and 99 warnings

To Reproduce Steps to reproduce the behaviour:

• Create a react native application and run it in the browser
• add did:key as a provider

Expected behaviour The package depends on @transmute/secp256k1-key-pair that was designed to run only with nodejs, not in the browser. The fix to add a fallback requires to use webpack instead of the native babel execution.

Versions (please complete the following information):

• Veramo: 5.4.1
• Browser Chrome

[mirceanis]

Our integration test suite includes a react app where crypto is specified as npm:crypto-browserify: https://github.com/uport-project/veramo/blob/e8c270f01d0e82d62489b444a3ce22442ad6ca0f/packages/test-react-app/package.json#L31

Perhaps this approach works for you too.

For us it is simpler to maintain overrides like this at the application level instead of trying to create isomorphic packages.

I'll close this issue as there is an easy workaround. Please reopen if this is a blocker.

[cre8]

@mirceanis Ty, it worked! :)