Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BUG] Warning: React has detected a change in the order of Hooks called by ConnectKitProvider. #356

Closed
Haavi97 opened this issue Feb 21, 2024 · 2 comments
Closed

[BUG] Warning: React has detected a change in the order of Hooks called by ConnectKitProvider. #356

Haavi97 opened this issue Feb 21, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@Haavi97
Copy link
Contributor

Haavi97 commented Feb 21, 2024

Describe the bug

I tried to migrate connectkit together with other libraries to the last versions and my dapp broke. I'm having problems with Alchemy provider and with the connect wallet when I cannot Metamask.
I think somewhere I might have some client side component on server side but I cannot find where.

VM41530:12 Warning: React has detected a change in the order of Hooks called by ConnectKitProvider. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. useContext                 useContext
3. useContext                 useContext
4. useEffect                  useEffect
5. useContext                 useContext
6. useContext                 useContext
7. useSyncExternalStore       useSyncExternalStore
8. useState                   useState
9. useState                   useState
10. useState                  useState
11. useState                  useState
12. useState                  useState
13. useState                  useState
14. useState                  useState
15. useState                  useState
16. useState                  useState
17. useEffect                 useEffect
18. useEffect                 useEffect
19. useEffect                 useEffect
20. useContext                useContext
21. useRef                    useRef
22. useRef                    useRef
23. useMemo                   useMemo
24. useSyncExternalStore      useSyncExternalStore
25. useEffect                 useEffect
26. useDebugValue             useDebugValue
27. useEffect                 useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at ConnectKitProvider (webpack-internal:///(app-pages-browser)/./node_modules/connectkit/build/index.es.js:15605:11)
    at QueryClientProvider (webpack-internal:///(app-pages-browser)/./node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:27:11)
    at Hydrate (webpack-internal:///(app-pages-browser)/./node_modules/wagmi/dist/esm/hydrate.js:12:13)
    at WagmiProvider (webpack-internal:///(app-pages-browser)/./node_modules/wagmi/dist/esm/context.js:13:13)
    at html
    at RootLayout (webpack-internal:///(app-pages-browser)/./app/layout.jsx:33:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:181:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:536:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11)

To reproduce

My RootLayout code where I setup connectkit

"use client";
import React from "react";
import { WagmiProvider, createConfig, http } from "wagmi";
import { ConnectKitProvider, getDefaultConfig } from "connectkit";
import { Toaster } from "react-hot-toast";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import "./i18n.jsx";

import Navbar from "../components/navigation/navbar";
import Footer from "../components/navigation/footer";
import {
  // mainnet,
  // polygon,
  // optimism,
  // arbitrum,
  polygonMumbai,
} from "wagmi/chains";

// Choose which chains you'd like to show
const chains = [polygonMumbai]; //, polygon, mainnet, optimism, arbitrum];

export default function RootLayout({ children }) {
  const config = createConfig(
    getDefaultConfig({
      chains,
      transports: {
        [polygonMumbai.id]: http(
          `https://polygon-mumbai.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_API_KEY}`
        ),
      },
      // Required API Keys
      walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,

      // Required
      appName: "Account Abstraction interaction Dapp",

      // Optional
      appDescription: "Your App Description",
      appUrl: "https://family.co", // your app's url
      appIcon: "https://family.co/logo.png", // your app's logo,no bigger than 1024x1024px (max. 1MB)
    })
  );

  const queryClient = new QueryClient();

  return (
    <html lang="en">
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <ConnectKitProvider mode="dark">
            <body>
              <Toaster position="bottom-right" />
              <Navbar />
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  minHeight: "105vh",
                }}
              >
                <div style={{ flexGrow: 1 }}>{children}</div>
                <Footer />
              </div>
            </body>
          </ConnectKitProvider>
        </QueryClientProvider>
      </WagmiProvider>
    </html>
  );
}

My code setting up Alchemy provider (using AA):

import { createWalletClient, custom } from "viem";
import { AlchemyProvider } from "@alchemy/aa-alchemy";
import { WalletClientSigner } from "@alchemy/aa-core";
import {
  LightSmartContractAccount,
  getDefaultLightAccountFactoryAddress,
} from "@alchemy/aa-accounts";
import { polygonMumbai } from "viem/chains";

const chain = polygonMumbai;

function useAAProvider() {
  const getProvider = async () => {
    const provider = new AlchemyProvider({
      apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY,
      chain: chain,
    });
    return provider;
  };

  const createEOASigner = () => {
    const client = createWalletClient({
      chain: polygonMumbai,
      transport: custom(window.ethereum),
    });

    // this can now be used as an owner for a Smart Contract Account
    const eoaSigner = new WalletClientSigner(
      client,
      "json-rpc" //signerType
    );

    return eoaSigner;
  };

  const connectProviderWithSCAAddress = async (accountAddress) => {
    const provider = await getProvider();
    const eoaSigner = createEOASigner();
    const connectedProvider = await provider.connect(
      (rpcClient) =>
        new LightSmartContractAccount({
          chain,
          owner: eoaSigner,
          accountAddress: accountAddress,
          factoryAddress: getDefaultLightAccountFactoryAddress(chain),
          rpcClient,
        })
    );
    return connectedProvider;
  };

  const connectProvider = async (scaAddress) => {
    const provider = await getProvider();
    const eoaSigner = createEOASigner();

    const connectedProvider = await provider.connect(
      (rpcClient) =>
        new LightSmartContractAccount({
          chain,
          owner: eoaSigner,
          accountAddress: scaAddress ? scaAddress : undefined,
          factoryAddress: getDefaultLightAccountFactoryAddress(chain),
          rpcClient,
        })
    );
    return connectedProvider;
  };
  return { connectProviderWithSCAAddress, connectProvider };
}

export default useAAProvider;

connectkit version 1.7.1

Expected behavior

Not see any error and being able to use the connectkit provider for the signer in the account abstraction Alchemy provider as I could do with previous version of connectkit

Screenshots

If applicable, add screenshots to help explain your problem.

Environment details

OS: Windows
Browser: Opera

Additional context

Next.js application

I have another error that might be related and I also haven't solved yet. I actually think this one is also caused by connectkit.
This is the traceback:

TypeError: Cannot read properties of undefined (reading 'http')
    at new AlchemyProvider (base.js:61:90)
    at getProvider (useAAProvider.jsx:15:22)
    at connectProvider (useAAProvider.jsx:54:28)
    at getProvider (index.jsx:80:30)
    at eval (index.jsx:59:7)
    at commitHookEffectListMount (react-dom.development.js:18071:39)
    at commitHookPassiveMountEffects (react-dom.development.js:19742:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19826:29)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
@Haavi97 Haavi97 added the bug Something isn't working label Feb 21, 2024
@lekevicius
Copy link

I think this was fixed #349, but not yet released.

We're waiting on connectkit release to upgrade our stack.

@lochie
Copy link
Member

lochie commented Feb 27, 2024

Just released this fix in ConnectKit 1.7.2, sorry about the delay!

@lochie lochie closed this as completed Feb 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@lekevicius @lochie @Haavi97