React-moralis failure to compile

Technical Issue Reporting
#1

I’m following the react-moralis intro and getting errors about failure to compile.

I make some simple changes to set my code up this way:

import { MoralisProvider } from 'react-moralis'
// ...other imports here...

function App() {
  return (
    <MoralisProvider appId={...} serverUrl={...}>
      <>Previously existing code here</>
    </MoralisProvider>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

But on the frontend I get this error:

Failed to compile.

Module not found: Can't resolve 'stream' in 'some_path/node_modules/cipher-base'
node_modules/cipher-base/index.js

In my webpack output, I see about a dozen errors that looks like this:

WARNING in ./node_modules/crypto-js/core.js 43:22-39
Module not found: Error: Can't resolve 'crypto' in '/Users/craig/Code/zombie-group/nft-grab-web/node_modules/crypto-js'

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 }
 @ ./node_modules/crypto-js/aes.js 4:37-54
 @ ./node_modules/moralis/lib/browser/CryptoController.js 9:6-30
 @ ./node_modules/moralis/lib/browser/Parse.js 37:47-76
 @ ./node_modules/moralis/index.js 1:0-50
 @ ./node_modules/react-moralis/lib/index.esm.js 2:0-34 291:15-32 313:44-56 437:45-70 484:38-50 540:45-63 593:45-64 606:38-58 629:30-50 729:45-58 777:38-58 875:26-38 894:45-64 944:106-113 965:20-33 1136:35-56 1184:31-46 1184:50-65 1194:41-69 1211:41-62
 @ ./src/app.tsx 5:0-48 17:27-42

How can I fix this? Does react-moralis need to be updated for Webpack 5 or something?

#2

Moralis should probably be updated itself to fix these errors so users don’t have to duct tape it. But I resolved this category of errors by simply following the instructions listed in the error.

It says:

If you want to include a polyfill, you need to:

  • add a fallback ‘resolve.fallback: { “crypto”: require.resolve(“crypto-browserify”) }’
  • install ‘crypto-browserify’

So I added the polyfill packages to the project (all the ones I was getting errors for):

yarn add \
  assert \
  crypto-browserify \
  stream-http \
  https-browserify \
  os-browserify \
  stream-browserify

And then added them to resolve.fallback in my webpack config:

resolve: {
  // ...other stuff...
  fallback: {
    assert: require.resolve('assert'),
    crypto: require.resolve('crypto-browserify'),
    http: require.resolve('stream-http'),
    https: require.resolve('https-browserify'),
    os: require.resolve('os-browserify/browser'),
    stream: require.resolve('stream-browserify'),
  }
}

Now I am working one one final error that remains:

WARNING in ./node_modules/moralis/lib/browser/MoralisWalletConnectProvider.js 63:44-83
Module not found: Error: Can't resolve '@walletconnect/web3-provider' in 'project_path/node_modules/moralis/lib/browser'
 @ ./node_modules/moralis/lib/browser/MoralisWeb3.js 69:59-100
 @ ./node_modules/moralis/lib/browser/Parse.js 45:42-66
 @ ./node_modules/moralis/index.js 1:0-50
 @ ./node_modules/react-moralis/lib/index.esm.js 2:0-34 291:15-32 313:44-56 437:45-70 484:38-50 540:45-63 593:45-64 606:38-58 629:30-50 729:45-58 777:38-58 875:26-38 894:45-64 944:106-113 965:20-33 1136:35-56 1184:31-46 1184:50-65 1194:41-69 1211:41-62
 @ ./src/app.tsx 5:0-48 17:27-42```
1 Like
#3

I found a simpler way to resolve the polyfill errors from above. Instead of adding all of the individual packages for assert, crypto-browserify, etc., just use node-polyfill-webpack-plugin.

Still have this error though:

Module not found: Error: Can't resolve '@walletconnect/web3-provider' in 'project_path/node_modules/moralis/lib/browser'
#4

did you also install walletconnect?

#5

For now I’ve just switched to using the basic moralis package rather than react-moralis, so I’m not sure.

For just moralis, yes I do need to yarn add @walletconnect/web3-provider. But I feel like moralis should come with all of its dependencies, I don’t understand why the dev should need to add @walletconnect/web3-provider themselves.

1 Like
#6

This is the issue with the ‘crypto’ model due to webpack5
Source: https://webpack.js.org/blog/2020-10-10-webpack-5-release/
and now the [email protected] using webpack5… you can solve this error for now by adding
react-script: 4.0.3 instead of react-script: 5.0.0 in package.json
and run command
npm install

1 Like
#7

We have detailed topic about webpack v5 support in our react-moralis docs

3 Likes