Avoid using dynamic imports

[dnemoga]

Describe the bug
See https://github.com/Zilliqa/Zilliqa-JavaScript-Library/blob/eed3fbc01ca7c0036845ed1c6c31cf9a925ce94f/packages/zilliqa-js-crypto/src/random.ts#L19-L21
You are using require('crypto') under condition which causes errors while building apps via Webpack or Angular build tools.

To Reproduce
Steps to reproduce the behavior:

1. Create Angular app from scratch (e. g. using @angular/cli)
2. Add @zilliqa-js/crypto as a dependency
3. Try to use crypto features somewhere in the code
4. Profit

[ghost]

Hi, @dnemoga I followed the steps you mentioned and I got some result to help you out.

Your possible issue

It seems like you experienced this error:

Module not found: Error: Can't resolve 'crypto' in '/.../node_modules/@zilliqa-js/account/dist'
ERROR in ./node_modules/@zilliqa-js/crypto/dist/index.umd.js

I can figure out the problem more precisely if you can provide your environment info and error logs.

Solution

Only If it's the case, you can reference the followings:

• Error: Can't resolve 'crypto' web3/web3.js#1555
• Webpack Config is stripping out Crypto angular/angular-cli#1548

You may want to follow this instruction to solve your issue.

Also, previously @iantanwx made a PR to Zilliqa-Wallet which is built with angular. You may want to check this ian's PR out.

FYI, in case you want to use React instead, I just made a working react example with CRA and TypeScript.

[iantanwx]

Thanks @noelyoo. Yes overriding the webpack config will work. Alternatively you may want to try emitting commonjs modules from typescript instead of esnext, although I have not tested this approach.

[ghost]

@iantanwx Sure, that approach will do.