Uncaught Error: Must be used within Provider when using an external provider such as wagmi about js

[AngelofPc]

Tried it with Connectkit and Rainbow Wallet before switching things up, But will try this and let you know. @joaquim-verges

[joaquim-verges]

@AngelofPc can you share how you're passing the external provider? here's a working example in our portal: https://portal.thirdweb.com/sdk/set-up-the-sdk/frontend#from-a-signer--provider

[AngelofPc]

Here @joaquim-verges

[joaquim-verges]

@AngelofPc looking at your stack trace, you're using the ConnectWallet component. That's only usable with the ThirdwebProvider which manages the wallet connection for you.

If you want to pass your own wagmi signer/provider using the ThirdwebSDKProvider, then you need to implement the wallet connection logic some other way. Here's an example using rainbowkit https://blog.avneesh.tech/how-to-use-rainbowkit-with-thirdweb

[AngelofPc]

Not working, same as before.

I think it's the now deprecated "useNftCollection" causing it.

I see that we are supposed to now use useContract() but there is no documentation for it or how to do a signature mint with it? @joaquim-verges

[joaquim-verges]

@AngelofPc but are you still using the ConnectWallet component from @thirdweb-dev/react in your code?

Btw curious why you need to pass the provider externally? Wonder if you can just use the normal thirdweb react setup to achieve what you want.

[AngelofPc]

No, i'm no longer using the ConnectWallet component.

Want to pass the use either ConnectKit or RainbowKit because of their UI especially.

Worked better before @thirdweb-dev/react 3.0.0 though.
@joaquim-verges

[joaquim-verges]

Got it. I think i see what the problem is. We'll get that fixed this week.

Thanks for reporting this 🙏

cc @jnsdls

[AngelofPc]

Thanks @joaquim-verges, Really appreciate.

Could you please let me know when it's done?

I'm present in the discord as well if it's easier.

[joaquim-verges]

@AngelofPc can you try this build and let me know if everything works for you?

npm install @thirdweb-dev/[email protected] @thirdweb-dev/[email protected]

[AngelofPc]

Works so far, thanks @joaquim-verges.

However, I noticed DevTools getting disconnected every time since i installed the update

Also, can you help with your email or twitter handle, I'd like your answer/feedback on something.

Thanks

[hexablob]

I still have the error Must be used within Provider, I don't understand why my _app is pretty simple :

<WagmiConfig client={wagmiClient}>
        <SessionProvider refetchInterval={0} session={pageProps.session}>
          <RainbowKitSiweNextAuthProviderCustom>
            <RainbowKitProvider chains={chains}>
              <ThirdwebProvider wagmiClient={wagmiClient}>
                <AnimatePresence exitBeforeEnter>
                  {getLayout(<Component {...pageProps} />)}
                </AnimatePresence>
              </ThirdwebProvider>
            </RainbowKitProvider>
          </RainbowKitSiweNextAuthProviderCustom>
        </SessionProvider>
      </WagmiConfig>

Here is the trace. @joaquim-verges any idea? (using @thirdweb-dev/[email protected] @thirdweb-dev/[email protected])

[joaquim-verges]

@sense thanks for reporting this.

What's inside your Claim component? Looks like the error is coming from there.

In general the thing to keep in mind when using an external wallet connector is that you can't use the thirdweb hooks related to wallet connection (like useAddress, useChainId etc) - those require the standard ThirdwebProvider since that's what would normally handle the wallet connection internally.

Instead for these wallet related hooks, you should use the ones from the library you're using (wagmi in your case).

All the contract related hooks should be usable though, that's what the dev build fixes (will ship it to stable today)

[hexablob]

Thanks @joaquim-verges my Claim page looks like :

// Disable SSR as thirdweb SDK only working on browser
const Claim = dynamic(() => import('../../components/Claim'), {
  ssr: false
})

const NftClaimPage = () => {
  return (
    <div className="flex flex-col">
      <Claim contractAddress={process.env.editionDropAddress} />
    </div>
  )
}

The thing that Thirdweb hooks are working great using the v2 of @thirdweb-dev/react and @thirdweb-dev/sdk so it's probably related to the v3 ? There is an opened thread on it on [this Discord thread].
(https://discord.com/channels/834227967404146718/1020660790296072242)
I made it work with the magicLinkWalletConnector as an external connector, but still with the v2.

[joaquim-verges]

@sense and it still happens with the latest releases? (v3.0.4)

we might have missed another hook that uses the wallet connection hooks internally. The stacktrace shows that something inside that /components/Claim is causing the issue. Likely one of our hooks. If you can help me pin point which one I can get a fix out very quickly.

[joaquim-verges]

@sense also - unrelated, but if you want to ping me on discord about that Disable SSR as thirdweb SDK only working on browser - i'm curious why you think that. We use our SDK in SSR on our dashboard so it's definitely possible!

[hexablob]

Let's continue the discussion on Discord then @joaquim-verges, thank you.