[BUG] ReferenceError: localStorage is not defined

Haavi97 commented 7 months ago

Describe the bug

Since one of the last updates a week or 2 ago, I'm having problems with the wagmi provider and since I'm not sure it is related to connectkit or wagmi library I'm opening the issue in both. Even though I'm using "use client"; in my Next RootLayout I keep getting this error:

ReferenceError: localStorage is not defined
    at ScopedLocalStorage.setItem (webpack-internal:///(ssr)/./node_modules/@coinbase/wallet-sdk/dist/lib/ScopedLocalStorage.js:12:9)    
    at new CoinbaseWalletSDK (webpack-internal:///(ssr)/./node_modules/@coinbase/wallet-sdk/dist/CoinbaseWalletSDK.js:42:23)
    at Object.getProvider (webpack-internal:///(ssr)/./node_modules/@wagmi/connectors/dist/esm/coinbaseWallet.js:78:23)
    at async reconnect (webpack-internal:///(ssr)/./node_modules/@wagmi/core/dist/esm/actions/reconnect.js:54:27)

To reproduce

This is the simple code I've used for testing:

"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 {
  polygonMumbai,
} from "wagmi/chains";

const chains = [polygonMumbai];

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}`
        ),
      },
      walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,

      appName: "Account Abstraction interaction Dapp",
    })
  );

  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>
  );
}

Expected behavior

No errors on the log. I'm not sure how it is affecting the app. I have other errors which I'm not sure if they are coming from this one

Environment details

Node v20.10.0 Next 14.1.3 connectkit 1.7.2 wagmi 2.5.7 @tanstack/react-query 5.21.7

lochie commented 7 months ago

Hey @Haavi97, have you tried enabling ssr? https://wagmi.sh/react/guides/ssr

 const config = createConfig(
    getDefaultConfig({
      ssr:true,
      // ... the rest of your config here
    })
  );

Haavi97 commented 7 months ago

Yep, that solved it. Thanks!

family / connectkit

[BUG] ReferenceError: localStorage is not defined #360