NextJS SSR bug

[t0mpl]

Hi everyone,

Following this tutorial: https://solana.com/developers/guides/wallets/add-solana-wallet-adapter-to-nextjs#3-setting-up-wallet-adapter-in-your-nextjs-app

I get this error:

TypeError: (0 , {imported module [project]/nodemodules/next/dist/server/route-modules/app-page/vendored/rsc/react.js [app-rsc] (ecmascript)}.createContext) is not a function

import React, { FC, ReactNode, useMemo } from "react";
import {
    ConnectionProvider,
    WalletProvider,
} from "@solana/wallet-adapter-react";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import { clusterApiUrl, } from "@solana/web3.js";

interface SolanaProviderProps {
    children: ReactNode;
}

export const SolanaProvider: FC<SolanaProviderProps> = ({ children }) => {
    const network = WalletAdapterNetwork.Devnet;
    const endpoint = useMemo(() => clusterApiUrl(network), [network]);
    const wallets = useMemo(
      () => [
        // manually add any legacy wallet adapters here
        // new UnsafeBurnerWalletAdapter(),
      ],
      [network],
    );

    return (
        <>
         <ConnectionProvider endpoint={endpoint}>
            <WalletProvider wallets={wallets}>
                {children}
            </WalletProvider>
         </ConnectionProvider>
        </>
    );
};

It only works when i "use client";

any idea if it's possible to wrap the whole app and not break the SSR ?

[nickfrosty]

This is generally the wrong place for this issue, but here is why it is happening:
nextjs uses server components by default, and react's createContext is client side only functionality (same with other types of react state). wallet adapter is only meant to be used client side only, hence the error

the only way to resolve this is to add the use client; directive at the top of the file. you could wrap the whole app and make it client only, but is a nextjs anti pattern (since it removes all server side functionality for pages) and should not be done

[t0mpl]

Thanks for explanation but as you had a dedicated NextJS part on the doc, I thought it was supporting SSR. Wagmi does so it is somehow possible to wrap the whole app.

Thanks for clarifying, i'll find another solution.