Can't import @evmos/transactions and @evmos/provider

[xiaogit00]

Hey @hanchon,

Was trying out the Evmosjs within a React project - but I didn't get too far. Not too sure what the issue is. After installing npm i evmosjs, I imported the following:

import { createMessageSend } from '@evmos/transactions'
import { evmosToEth } from '@evmos/address-converter'
import { generateEndpointBroadcast, generatePostBodyBroadcast } from '@evmos/provider'
import { createTxRawEIP712, signatureToWeb3Extension } from '@evmos/transactions'

And the browser shows the following error messages:

Compiled with problems:X

ERROR in ./node_modules/@cosmjs/crypto/build/pbkdf2.js 46:67-84

Module not found: Error: Can't resolve 'crypto' in '/Users/lei/github_projects/evmos-wallet-integration/node_modules/@cosmjs/crypto/build'

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 }

ERROR in ./node_modules/cipher-base/index.js 2:16-43

Module not found: Error: Can't resolve 'stream' in '/Users/lei/github_projects/evmos-wallet-integration/node_modules/cipher-base'

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: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }

ERROR in ./node_modules/ethereumjs-util/dist/account.js 7:13-30

Module not found: Error: Can't resolve 'assert' in '/Users/lei/github_projects/evmos-wallet-integration/node_modules/ethereumjs-util/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: { "assert": require.resolve("assert/") }'
    - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "assert": false }

ERROR in ./node_modules/ethereumjs-util/dist/object.js 7:13-30

Module not found: Error: Can't resolve 'assert' in '/Users/lei/github_projects/evmos-wallet-integration/node_modules/ethereumjs-util/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: { "assert": require.resolve("assert/") }'
    - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "assert": false }

ERROR in ./node_modules/libsodium/dist/modules/libsodium.js 39:23-46

Module not found: Error: Can't resolve 'path' in '/Users/lei/github_projects/evmos-wallet-integration/node_modules/libsodium/dist/modules'

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: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

Im using node version 14.7.0, and react version 18.2.0.

[hanchon]

Are you forced to use v14.7.0? The official dashboard is using this lib and running with node version v16.4.1 and react v18.2.0. We didn't find any problem with that configuration. If you are forced to use v14.7.0 I can try to replicate it locally and look for a fix, the errors seams to be from some of the external libs =/

[xiaogit00]

ah I see @hanchon! Nope no reason for me using node v14.7.0, just didn't upgrade it 😁 will upgrade it and give it a go.

thanks man

[xiaogit00]

hey @hanchon, I upgraded to node version 16.4.1 and the issue still persists.

[olegshilov]

hi @xiaogit00, you should try to customize your webpack config. try to add following lines:

{
  resolve: {
    fallback: {
      crypto: false,
      stream: false,
      assert: false,
      path: false,
    },
  },
}

[hanchon]

Yes, it's an issue with webpack 5 https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5 I should work fine if using next, because it doesn't depend on react-script