[bug] Can't connect to MetaMask w/ Next.js

[jemgold]

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.0.17

Current Behavior

Not sure if this is a Next.js specific thing - it's happening for me in the example + in my own fresh Next.js app

Simple setup - just following the guide

export const Example = () => {
  const [{ data, error }, connect] = useConnect();

  return (
    <div>
      {data.connectors.map((x) => (
        <button disabled={!x.ready} key={x.id} onClick={() => connect(x)}>
          {x.name}
          {!x.ready && ' (unsupported)'}
        </button>
      ))}

      {error && <div>{error?.message ?? 'Failed to connect'}</div>}
    </div>
  );
};

Expected Behavior

No response

Steps To Reproduce

No response

Anything else?

No response

[tmm]

Did you wrap your app in the Provider?

The log error is coming from SSR mismatch since we don't know the name of the InjectedConnector until it hits the browser and can check for isMetaMask, isCoinbaseWallet, etc. on window.ethereum.

You can get rid of that error by waiting until the component is mounted to display the name for the InjectedConnector.

import * as React from 'react'

export const useIsMounted = () => {
  const [mounted, setMounted] = React.useState(false)
  React.useEffect(() => setMounted(true), [])
  return mounted
}

export const Example = () => {
  const isMounted = useIsMounted()
  const [{ data, error }, connect] = useConnect()

  return (
    <div>
      {data.connectors.map((x) => (
        <button disabled={!x.ready} key={x.id} onClick={() => connect(x)}>
          {isMounted ? x.name : x.id === 'injected' ? x.id : x.name}
          {!x.ready && ' (unsupported)'}
        </button>
      ))}

      {error && <div>{error?.message ?? 'Failed to connect'}</div>}
    </div>
  )
}

[jemgold]

ahhh that works, thanks - I missed the way you did that trick in docs/components/WalletSelector.tsx

p.s. for posterity, if this trips anyone else up -

import * as React from 'react';
import { useConnect } from 'wagmi';

export const useIsMounted = () => {
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted;
};

export const Example = () => {
  const isMounted = useIsMounted();
  const [{ data, error }, connect] = useConnect();

  return (
    <div>
      {data.connectors.map((x) => (
        <button
--          disabled={!x.ready}
++          disabled={isMounted ? !x.ready : false}
          key={x.id}
          onClick={() => connect(x)}
        >
          {isMounted ? x.name : x.id === 'injected' ? x.id : x.name}
--          {!x.ready && ' (unsupported)'}
++          {isMounted ? !x.ready && ' (unsupported)' : ''}
        </button>
      ))}

      {error && <div>{error?.message ?? 'Failed to connect'}</div>}
    </div>
  );
};

[abdulrauf11]

For Next.js specifically, you can also import the component dynamically to get around this issue.

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/example'))

Here's the link if you need more info: https://nextjs.org/docs/advanced-features/dynamic-import

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest wagmi version. If you have any other comments you can create a new discussion.