family / connectkit

Connecting a wallet, made simple.
https://docs.family.co/connectkit
BSD 2-Clause "Simplified" License
856 stars 187 forks source link

[BUG] localStorage is not defined #347

Closed winsoroaks closed 8 months ago

winsoroaks commented 8 months ago

Describe the bug

Wagmi config with getDefaultConfig is breaking. im running into

ReferenceError: localStorage is not defined
    at ScopedLocalStorage.setItem (my-app/node_modules/@coinbase/wallet-sdk/dist/lib/ScopedLocalStorage.js:12:9)
    at new CoinbaseWalletSDK (my-app/node_modules/@coinbase/wallet-sdk/dist/CoinbaseWalletSDK.js:42:23)
    at Object.getProvider (file://my-app/node_modules/@wagmi/connectors/dist/esm/coinbaseWallet.js:60:23)
    at reconnect (file://my-app/node_modules/@wagmi/core/dist/esm/actions/reconnect.js:46:43)

when i copied and pasted the starter code. i unblocked myself by removing the getDefaultConfig.

To reproduce

// gives me the error above when i run `next build`
const wagmiConfig = createConfig({
  getDefaultConfig({
    chains: [arbitrum],
    transports: {
      [arbitrum.id]: http(),
    },
  walletConnectProjectId: projectId,
  appDescription: "hello",
  appUrl: "https://hello", 
  appIcon: "https://hello/logo.png", 
  }),
});

// works
const wagmiConfig = createConfig({
  chains: [arbitrum],
  transports: {
    [arbitrum.id]: http(),
  },
})

Expected behavior Should be able to build without the localStorage undefined error.

Environment details viem: ^2.7.6, wagmi: ^2.5.6,

lochie commented 8 months ago

@winsoroaks I came across this error the other day and recreated it just by having Coinbase Wallet set up in the config (does not need to be using ConnectKit for this error to happen).

If you could confirm for me, does this still occur if you include a coinbaseWallet connector inside your wagmi config?

I've pinged the wagmi team, and am about to escalate it to the Coinbase team.

lochie commented 8 months ago

I recreated this in stackblitz. You can see this same error when running npm run build. https://stackblitz.com/edit/stackblitz-starters-htymxq?file=app%2Fweb3provider.tsx

This issue doesn't have anything to do with the ConnectKit library, so going to close this issue. But I've alerted CBW and the wagmi team about this issue.

@winsoroaks If you need a temporary solution, you can override the ConnectKit connectors to remove coinbase wallet (or all the connectors) on the server to help avoid these build issues.

const ckConfig = getDefaultConfig({
  // your config
});

const config = createConfig({
  ...ckConfig,
  connectors: [
    typeof window !== 'undefined'
      ? ckConfig.connectors
      : [],
  ]
});
lochie commented 7 months ago

@winsoroaks this should be fixed by including ssr: true in your wagmi config, for example:

const wagmiConfig = createConfig({
  getDefaultConfig({
    ssr :true, // be sure to include this if you are using SSR
    chains: [arbitrum],
    transports: {
      [arbitrum.id]: http(),
    },
  walletConnectProjectId: projectId,
  appDescription: "hello",
  appUrl: "https://hello", 
  appIcon: "https://hello/logo.png", 
  }),
});