@web3uikit/web3 not working anymore in react/nextjs

[KMean]

As moralis is updating to v2 lots of user had to stay to moralis@1.11.0 and react-moralis@1.3.5 for beeing able to use last react-moralis functionality. Unfortunately @web3uikit/web3 is throwing a server error:

Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I wonder if this is coming because of the use of react-moralis@^1.4.0 as dependencies on your side?

lots of users are facing same issue and can't use @web3uikit/web3 anymore. Can you have a look at it?

many thanks.

[BillyG83]

thanks for using the kit and reporting the issue @KMean

can you take a look at this one please @AbhinavMV 🙏

[BillyG83]

hey @KMean have you seen that you must connect to SDK V1?

https://github.com/MoralisWeb3/changelog/blob/main/2022-08-08-moralis-v1-support.md

[ErnoW]

In addition to what @BillyG83 mentioned, to use it with react, you should use the following packages: react-moralis: 1.4.1 (or above) moralis-v1: 1.11.0 (or above)

moralis-v1 is a copy of the original moralis package. We will use this package for bug fixes on the v1 build.

Or you can use react-moralis 1.4.0 (or below) moralis: 1.11.0 (or below)

And be aware on the versioning if you have set the exact version of 1.4.0 or 1.4.1 (and not ^1.4.0 as this will resolve to 1.4.1)

[KMean]

Unfortunately no one can use that versions as moralis throws an error:

Unhandled Runtime Error TypeError: Right-hand side of 'instanceof' is not callable

this came up already a lot on the moralis forum and on discord and it looks like the only way to fix it is reverting to react-moralis@1.3.5

using moralis-v1 is fine but @web3uikit/web3 is throwing another error:

NoMoralisContextProviderError: Make sure to only call useMoralis within a MoralisProvider

of course my app is wrapped by a MoralisProvider so it should work.

can you try and replicate the issue?

[BillyG83]

Hey @AbhinavMV can you have a go at recreating this issue when you are free please? I'm on the FE 2.0 build and the Ending Legacy Epic right now 🙏

[AbhinavMV]

Hey @KMean,

I tested this by creating a react and nextjs app and it seems to be working with following package versions.

    "@web3uikit/web3": "^0.1.5",
    "moralis": "1.11.0",
    "react-moralis": "1.4.0",

Please don't upgrade react-moralis to 1.4.1 yet, that's where I am facing the issue TypeError: Right-hand side of 'instanceof' is not callable

[KMean]

tried it with no luck:

[AbhinavMV]

It seems to be working for me with all the packages from your package.json file.

Could you try deleting node_modules folder and package.lock.json and do npm install again... @KMean ?

[KMean]

Hey @AbhinavMV , thanks for trying to replicate the error. I tried also starting from scratch and I got the same error:

https://user-images.githubusercontent.com/5776449/184686698-6fcaeb5e-c37f-43e8-9dc0-ec00b20ae4e9.mp4

[BillyG83]

hey @KMean I am sorry, this really sucks that it is not working for you. Unfortunately this is an open source project and @AbhinavMV has only a small amount of his time allocated to this. We mostly work on it on our own time.

So if the project works for Ahbinav with this setup

"@web3uikit/web3": "^0.1.5",
"moralis": "1.11.0",
"react-moralis": "1.4.0",

that is about all we can do amigo, so sorry. If we look into every dependancy of dependancy in every framework issue, its a full time job that we do not have.

At this point I would have to ask you to dig into it yourself and if you find the problem or a fix please share it with everyone on Discord. 😞

Thanks so much for trying the kit, if you can help us improve it we would be so grateful to have you as a contributor on this open source project

[KMean]

Hey @BillyG83, I understand... as far as i know most people facing same issue decided to remove the kit and implement moralis functionalities from scratch... at the end is not difficult to create a button and code the auth part of it. Was nice because especially at the beginning of a project you need quick implementations to try things out but it's ok. Still using the rest of your kit. If I'll have time to investigate more I'll let you know.

Thanks.

[stiucsib86]

For those that still facing this issue, I noticed that this is fixed with the latest version of react-moralis (1.4.2):

"moralis-v1": "^1.11.0",
"react-moralis": "^1.4.2",
"web3uikit": "^1.0.4"

[BillyG83]

thanks @stiucsib86 very nice of your to chip in here

hey @KMean is it ok for us to close this now my friend?

TY both for using a kit 💚

[KMean]

thanks @stiucsib86 very nice of your to chip in here

hey @KMean is it ok for us to close this now my friend?

TY both for using a kit 💚

Yes, thank you. Keep up the good work 💪

[KMean]

Unfortunately on one can use that versions as moralis throws an error:

Unhandled Runtime Error

TypeError: Right-hand side of 'instanceof' is not callable

this came up already a lot on the moralis forum and on discord and it looks like the only way to fix it is reverting to @.***

using moralis-v1 is fine but @web3uikit/web3 is throwing another error:

NoMoralisContextProviderError: Make sure to only call useMoralis within a

of course my app is wrapped by a MoralisProvider so it should work. can you try and replicate the issue? Kim Ranzani Visual Effects Supervisor Il giorno lun 15 ago 2022 alle ore 16:18 Erno Wever < ***@***.***> ha scritto: > In addition to what @BillyG83 mentioned, to > use it with react, you should use the following packages: > react-moralis: 1.4.1 (or above) > moralis-v1: 1.11.0 (or above) > > moralis-v1 is a copy of the original moralis package. We will use this > package for bug fixes on the v1 build. > > — > Reply to this email directly, view it on GitHub > , > or unsubscribe > > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >

[BillyG83]

hey @KMean we are planning to remove the "Moralis Server" functionality soon and move toward our enterprise facing Moralis 2.0 APIs... so this issue will most likely never be fixed. Sorry for any inconvenience, but NextJS is one of the two Moralis API solutions we will offer with the kit so stay tuned 😁