Error in React Typescript with Moralis

[oscar]

I did the command below.

1. yarn create react-app my-app
2. yarn add moralis
3. yarn add react-moralis

Wrap MoralisProvider to App component in index.tsx

After that
webpack 5.65.0 compiled with 14 errors and 24 warnings in 1069 ms

How should I do?
This is my repo.

GitHub - 15077693d/moralis-with-typescript-dapp: Try moralis with typescript

[oscar]

The error are as follows:

Compiled with problems:

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

Module not found: Error: Can’t resolve ‘stream’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/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/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can’t resolve ‘crypto’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/node_modules/eth-lib/lib’

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/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can’t resolve ‘assert’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/node_modules/ethereumjs-util/dist.browser’

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.browser/address.js 14:31-48

Module not found: Error: Can’t resolve ‘assert’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/node_modules/ethereumjs-util/dist.browser’

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.browser/object.js 46:31-48

Module not found: Error: Can’t resolve ‘assert’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/node_modules/ethereumjs-util/dist.browser’

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/swarm-js/node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can’t resolve ‘crypto’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/node_modules/swarm-js/node_modules/eth-lib/lib’

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/web3-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can’t resolve ‘crypto’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/node_modules/web3-eth-accounts/lib’

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/web3-providers-http/lib/index.js 30:11-26

Module not found: Error: Can’t resolve ‘http’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/node_modules/web3-providers-http/lib’

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

ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28

Module not found: Error: Can’t resolve ‘https’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/node_modules/web3-providers-http/lib’

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

ERROR in ./node_modules/web3-providers-ws/lib/helpers.js 11:12-26

Module not found: Error: Can’t resolve ‘url’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/node_modules/web3-providers-ws/lib’

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: { “url”: require.resolve(“url/”) }’
- install ‘url’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “url”: false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can’t resolve ‘http’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/node_modules/xhr2-cookies/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: { “http”: require.resolve(“stream-http”) }’
- install ‘stream-http’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “http”: false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can’t resolve ‘https’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/node_modules/xhr2-cookies/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: { “https”: require.resolve(“https-browserify”) }’
- install ‘https-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “https”: false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can’t resolve ‘os’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/node_modules/xhr2-cookies/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: { “os”: require.resolve(“os-browserify/browser”) }’
- install ‘os-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “os”: false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 43:10-24

Module not found: Error: Can’t resolve ‘url’ in ‘/Users/yiulapsang/Desktop/workspace/blockchain/try-moralis/node_modules/xhr2-cookies/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: { “url”: require.resolve(“url/”) }’
- install ‘url’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “url”: false }

[YosephKS]

Hey @oscar, this is webpack 5 error as our SDK is not working very well with it out of the box, you can revert your react-scripts to 4.0.3 as what we are using in Ethereum Boilerplate https://github.com/ethereum-boilerplate/ethereum-boilerplate to use webpack 4

Cheers~

[oscar]

Thanks! All error are almost gone!
After i change react-scripts to 4.0.3, there leave one last error.
“react-scripts”: “4.0.3”,

Compiled with warnings.

./node_modules/moralis/lib/browser/MoralisWalletConnectProvider.js
Module not found: Can’t resolve ‘@walletconnect/web3-provider’ in ‘/Users/xxx/Desktop/workspace/blockchain/try-moralis/node_modules/moralis/lib/browser’

[YosephKS]

It’s just a warning would not affect your application, but you can remove the warning by npm i @walletconnect/web3-provider