Moralis JS SDK v1.0 (migration to Ethers.js)

@Erno
Those are my dependencies

"dependencies": {

    "@walletconnect/web3-provider": "^1.7.1",

    "axios": "^0.24.0",

    "install": "^0.13.0",

    "moralis": "^1.0.1",

    "next": "^12.0.8",

    "react": "^17.0.2",

    "react-dom": "^17.0.2",

    "react-moralis": "^0.3.11",

    "timeago-react": "^3.0.4"

  },

So you need to update react-moralis as well to v1.0

@Erno could you please give me the commands on how to do so
. Thanks

Try npm install react-moralis@latest

Thanks @Erno :muscle:

1 Like

yes, the server is not affected by this update

1 Like

Thank you very much !!! I confirm : i solved my current problem by reading this post.
I let my development project 2 days ago, working perfectly, and today when i relaunched everything i discovered tons of error in my browser console. I really started to be desperated (ahahah). But fortuntely, i have seen the youtube recent video on “Nitro” and then saw this post.
EVERYTHING WORKS BACK AGAIN !!! Champaaaagne !

1 Like

Is there a way to just go back to how things were before the update? I cant figure out how to fix the breaks, I’m still new to coding.
I updated moralis and react-moralis. I’m not using any of the new features, I just want to go back.

You can just install the previous version: npm install [email protected]
And you can do the same for react-moralis: npm install [email protected]

1 Like

seems the moralis v1.0.1 and react-moralis v1 are still not compatible with react-scripts v5, it would be nice to make them working in together.

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 }
 @ ./node_modules/create-hash/browser.js 11:11-33
 @ ./node_modules/ethereumjs-util/dist/index.js 23:17-39
 @ ./node_modules/web3-provider-engine/index.js 5:16-42
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 6:23-54
 @ ./node_modules/moralis/lib/browser/Web3Connector/WalletConnectWeb3Connector.js 158:54-93
 @ ./node_modules/moralis/lib/browser/MoralisWeb3.js 83:57-110
 @ ./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 3:0-36 5335:11-24

Upgrading to V1 of react-moralis with WalletConnect breaks the app:

Hi.
When we upgrade the npm package of react-moralis to V1, we see these errors when trying to launch our app:
./node_modules/@walletconnect/http-connection/node_modules/eventemitter3/index.js
Module build failed: Error: ENOENT: no such file or directory, open ‘/Users/shahar/Projects/gallerium/frontend/node_modules/@walletconnect/http-connection/node_modules/eventemitter3/index.js’

We tried to just remove the @walletconnect/web3-provider package as I know you guys are moving to ether, but then running the app brings this error in build time:
Module not found: Can’t resolve ‘@walletconnect/web3-provider’ in ‘/Users/shahar/Projects/gallerium/frontend/node_modules/moralis/lib/browser/Web3Connector’

So basically, it seems that trying to run V1 with wallet connect is broken.
Anything we are missing or should we just downgrade back to the latest version before V1?

This is an issue with webpack v5, where you need to polyfill any nodeJs dependencies (which is quite common to use in web3 development). We will work on making a boilerplate, compatible with webpack v5. For now the best way is to polyfill the dependencies or to use webpack v4

This is a known issue, and we are working on a fix. In the meantime, you can downgrade to v0.0.184 until we have the fix live.

1 Like

Thanks. Will do that.

Hi there,

Same issue with my dApp completely breaking with this change. I have rolled back to v0.0184 but I’m getting a whole bunch of errors.

I tried to do the latest version of Moralis with the walletconnect thing, but that just kept say the dependancy was missing as if I had not installed it.

So now I have rolled back to the previous version. Here are my dependancies:

image

and here is the part of my code that is giving me trouble:

Ideally, I’d like to be on the latest version using wallet connect and the Ethers.js library, but the only instruction I found was

Any advise on how to do this would be awesome. I have tried looking at the docs and have adjusted the code several times but I’m obviously missing something critical.

Here is my auth code as well in case that helps:
image

To convert your app to EthersJs, you need to check where you use the web3Js functions, and find similar functions from EthersJs. It is a different library so there is no 1-on-1 replacement.
For example, see in their docs on how to use contract interactions: https://docs.ethers.io/v5/api/contract/example/
Alternatively, you could still use web3Js via

import Web3 from 'web3' // Only when using package mananger. 
import Moralis from 'moralis'  // Only when using package mananger

await Moralis.enableWeb3()
const web3 = new Web3(Moralis.provider)

Thank you that!

I have updated my code but now I get this error:

Here is the code:

But it’s odd, earlier in the code, the same adjustment seems to have resolved the error for this line:

So I cannot figure out why it works in one part of the code, but not the other.

1 Like

I think this is because enableWeb3 replaces Moralis.provider, so If you call new Web3(Moralis.provider) twice, then the old web3 instance will have a reference to a provider that no longer exists.

What you can do is to call enableWeb3 once, then create a web3Js instance via new Web3(Moralis.provider), and store this as a globally variable web3 or store it in the window.web3.

@Erno :
I follow the tutorial “I Cloned Rarible in 24H”.
For information, in my frontend index.html, i had upgraded my Moralis SDK to v. 1.0.1, then 1.0.2 and today to 1.0.3 and i indeed noticed in my browser console new issues like :

Uncaught (in promise) ReferenceError: tokenContract is not defined
    at mintNFT (main.js:227:19)
    at HTMLButtonElement.createItem (main.js:182:23)
mintNFT	@	main.js:227
createItem	@	main.js:182

I have then downgraded my SDK to 0.0.184 as you stated and everything works fine now. I can mint back again + list in my marketplace. So, untill the new SDK fix, i’m going to use this:

<script src="https://unpkg.com/[email protected]/dist/moralis.js"></script>

1 Like

I would like to do Moralis.authenticate() with let’s say ethers.Wallet.createRandom(). Can I? if yes, how?