Incompatibility with NextJS (11.0.0) about wallet-adapter HOT 25 CLOSED

Sure thing! I'll have a looksy tomorrow.

from wallet-adapter.

Nice, good catch with shx and thanks for the addition to the docs. I've merged and will close this, but please reopen if other issues are found.

from wallet-adapter.

Thanks for the report and documenting the workaround. I'm a big fan of Next.js! I'll test next week and see if we can provide a starter project using it, and try to rework the window checks so that they won't hard fail with SSR.

from wallet-adapter.

Just to keep the discussion centralized, this is a huge step forward but I think there will always be a need for transpiling the dependencies, perhaps the solution to this problem can be in the form of documentation, as bundling third party libraries might have a negative effect on the final bundle size and could be a bit too opinionated.

from wallet-adapter.

I created a throwaway branch using esbuild: #50

I'm not happy with the result though. There are various issues with the webpack starter projects using it, and from what I can tell we'd lose tree shaking for the wallets package, which is kind of a dealbreaker IMO.

perhaps the solution to this problem can be in the form of documentation

Let's go with this approach. I would be happy to accept any PRs to document use with different frameworks and build systems.

from wallet-adapter.

@Hossman333 @grumpyoldman-io would anyone be willing to PR an addition to the readme for Next.js config? Would love to help other users coming to this and be able to close this issue.

from wallet-adapter.

Hey @jordansexton! Sorry I didn't help out with the PR more. You got to it quick! Thanks for doing all of that. I tested it locally and only ran into a few snags that I thought someone else could run into and be confused about. shx wasn't a dev dep and I think it's worth including it if you're going to be using that as part of the clean script otherwise it errors out.

And then simply adding the instructions to install the deps. 🤷🏻‍♂️ Just some thoughts. Other than that everything works as expected!! Good job and thank you for being so on top of everything!

My PR with those additions: https://github.com/solana-labs/wallet-adapter/pull/58/files

from wallet-adapter.

@Hossman333 can you perhaps share your error? I think it boils down to adding some third party dependencies to the next.config.js until it works. There is stuff in the works to make the wallet adapters more compatible with other frameworks like NextJS

from wallet-adapter.

My good sir....I might be stupid. Hahah. I moved out the ClientWalletProvider.tsx outside of the pages directory and it worked that time. 🤦🏻‍♂️

Thank you for being my rubber ducky and I'm sorry about the spam. This workaround will work great for now. Thank you

from wallet-adapter.

Could you check out the code in #32 and tell me if it resolves the issues with Next.js without these workarounds?

from wallet-adapter.

@grumpyoldman-io your fix worked great while developing locally, but once I try to deploy the code it has the window is not defined error again. Were you able to work around that? I'll have to look into it a bit more to figure out a work around. Thanks for sharing your workaround. Made it work here locally. 😃

from wallet-adapter.

@grumpyoldman-io Oh of course! Sorry I didn't share it.

BTW: When I say deploy, it runs npm run build. So I could reproduce that error locally by running that command

Awesome, I'm happy to hear that is in the works. I'd love to help, but I'm not completely sure where I'd start. Either way, my next.config.js looks like this(like you shared above):

/* eslint-disable @typescript-eslint/no-var-requires */
const withTM = require("next-transpile-modules")([
  "@solana/wallet-adapter-base",
  "@solana/wallet-adapter-bitpie",
  "@solana/wallet-adapter-coin98",
  "@solana/wallet-adapter-ledger",
  "@solana/wallet-adapter-mathwallet",
  "@solana/wallet-adapter-phantom",
  "@solana/wallet-adapter-react",
  "@solana/wallet-adapter-solflare",
  "@solana/wallet-adapter-sollet",
  "@solana/wallet-adapter-solong",
  "@solana/wallet-adapter-torus",
  "@solana/wallet-adapter-wallets",
  "@project-serum/sol-wallet-adapter",
]);

module.exports = withTM({
  webpack5: true,
});

Thank you for responding and for writing all this up in the issue.

from wallet-adapter.

@Hossman333 does that Next config fix your issues, or is that build error happening after adding it?

from wallet-adapter.

It fixes my issue when I run npm run dev. I used to get the window error and then that config fixed it. I can connect to the wallets and everything here locally, but when I try and run npm run build that's when the window is not defined error comes up again.

I wonder if the optimized build does something different when loading in the external dependencies?

from wallet-adapter.

Which by the way this is what they run:

    "dev": "next dev",
    "build": "next build",

from wallet-adapter.

@Hossman333 Hmmmm, I cant replicate the error, but if you add @toruslabs/openlogin to the list in your next.config.js it should transpile it. If you get new warnings like "unexpected token export", keep adding the packages until its gone. Although I fear it is not connected. Are you perhaps referencing the wallet adapters in your Components without making sure they're not server side rendered?

Notice how I dynamically imported my Wallet component, this makes sure it is only loaded when the code is executed on the client side of things.

from wallet-adapter.

Relevant: project-serum/sol-wallet-adapter#38

from wallet-adapter.

Hmmmm thanks for your response! Great comment and thoughts @grumpyoldman-io. I think you're on to something about the wallet adapters being referenced outside of the files. Though I have a very similar situation to you other than I have a few different connectors and using the react-ui library.

This is what my ClientWalletProvider looks like. I wonder if one of these providers has some dependencies that are causing issues when building it.

I think because my Navigation.tsx is being loaded by the ClientWalletProvider.tsx and that's being dynamically loaded it should be fine.

ClientWalletProvider.tsx

import type { WalletProviderProps } from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import { WalletProvider } from "@solana/wallet-adapter-react";
import {
  getPhantomWallet,
  getSolflareWallet,
  getSolletWallet,
} from "@solana/wallet-adapter-wallets";
import type { ReactNode } from "react";
import { useMemo, useCallback } from "react";
import Notification from "./Notification";
import { WalletError } from "@solana/wallet-adapter-base";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import Navigation from "./Navigation";
import toast, { Toaster } from "react-hot-toast";
import { ConnectionProvider } from "@solana/wallet-adapter-react";
import { clusterApiUrl } from "@solana/web3.js";

export default function ClientWalletProvider(
  props: Omit<WalletProviderProps, "wallets"> & { children: ReactNode }
): JSX.Element {
  const network = WalletAdapterNetwork.Devnet;
  const endpoint = useMemo(() => clusterApiUrl(network), [network]);

  const onError = useCallback(
    (error: WalletError) =>
      toast.custom(
        <Notification
          message={
            error.message ? `${error.name}: ${error.message}` : error.name
          }
          variant="error"
        />
      ),
    []
  );
  const wallets = useMemo(
    () => [getPhantomWallet(), getSolflareWallet(), getSolletWallet()],
    [network]
  );

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider
        wallets={wallets}
        onError={onError}
        autoConnect
        {...props}
      >
        <WalletModalProvider>
          <Navigation />
        </WalletModalProvider>
        <Toaster position="bottom-left" reverseOrder={false} />
      </WalletProvider>
    </ConnectionProvider>
  );
}

Navigation.tsx

import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
import { useWallet } from "@solana/wallet-adapter-react";
import React, { FC, Fragment } from "react";
import {
  CloudUploadIcon,
  CogIcon,
  LockClosedIcon,
  RefreshIcon,
  ServerIcon,
  ShieldCheckIcon,
  XIcon,
  ChevronDownIcon,
} from "@heroicons/react/outline";

export default function Navigation() {
  const { wallet } = useWallet();

  return (
    <WalletMultiButton className="hover:bg-teal-400 inline-flex items-center px-4 py-2 border border-transparent text-base  rounded-md shadow bg-gradient-to-r from-teal-500 to-cyan-600 text-white font-medium hover:from-teal-600 hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-400 focus:ring-offset-gray-900" />
  );
}

_app.tsx

import type { AppProps } from "next/app";
import dynamic from "next/dynamic";
import React, { FC, useCallback, useMemo } from "react";
import "./notification.css";

// Work around to use the Solana Wallet Adapter with Next.js
// https://github.com/solana-labs/wallet-adapter/issues/30
const WalletProvider = dynamic(() => import("./ClientWalletProvider"), {
  ssr: false,
});

export default function App({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <div>
      <WalletProvider />
      <Component {...pageProps} />
    </div>
  );
}

Anything super obvious just looking at it? Probably not useful to just share my code like this, but thought maybe you would be able to see something..

When I add in @toruslabs/openlogin to the next.config.js it then starts having a different issue. It goes from window not defined to

./node_modules/@toruslabs/openlogin-jrpc/dist/openlogin-jrpc.cjs.js
TypeError: Property left of AssignmentExpression expected node to be of a type ["LVal"] but instead got "BooleanLiteral"


> Build error occurred

Anyways, still trying to dig at it. It's a struggle. Thanks for the help you've given me, it's helped me along so far a lot!

from wallet-adapter.

Hmmm, when I do your exact setup up above with a few modifications it still doesn't work when running npm run build. Do you perhaps have something in your config other than what you shared? @grumpyoldman-io

from wallet-adapter.

Thought it was because of @solana/wallet-adapter-react-ui, so I added it to the next.config.js file and it still didn't work, so this time I tried just completely removing it and trying to stick as close to your code up above with issues on the build again. So strange that it works when running it locally, but not while building it for prod! There's gotta be something here I'm not understanding.

from wallet-adapter.

Please try out #57 and let me know if this works for you.

from wallet-adapter.

#204 was implemented, which should allow wallets to be safely used in an SSR context because their potentially unsafe dependencies aren't loaded until connect is called.

from wallet-adapter.

Hello, all.
I got this error in Next.js while using WalletMultiButton.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

If anyone who knows about this, hope to get advice from him. Thank you

from wallet-adapter.

@Smith0309 If you're using Next.js, you'll want to wrap components that may change from the server to the client with dynamic.

from wallet-adapter.

Thank you for your reply.
Yup, so what is the solution?

from wallet-adapter.