search

anza-xyz / wallet-adapter

Modular TypeScript wallet adapters and components for Solana applications.
https://anza-xyz.github.io/wallet-adapter/
Apache License 2.0
1.57k stars 947 forks source link

Warning: Expected server HTML to contain a matching <i> in <button> in WalletConnectButton #671

Closed happyeric77 closed 1 year ago

happyeric77 commented 1 year ago

Hello Team, Recently I found there is a warning shown in my NEXTjs dapp related to wallet adaptor like the following:

Screen Shot 2022-12-08 at 9 47 44

My dependency is like below, is it possible to get ride of it?

"dependencies": {
    "@chakra-ui/icons": "^1.1.1",
    "@chakra-ui/react": "^1.7.4",
    "@dappio-wonderland/gateway": "^0.2.20",
    "@dappio-wonderland/navigator": "^0.2.16",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@jup-ag/react-hook": "1.0.0-beta.26",
    "@metaplex-foundation/mpl-token-metadata": "^1.2.5",
    "@next/bundle-analyzer": "^12.1.6",
    "@pngfi/react-hooks": "^0.3.43",
    "@project-serum/anchor": "0.24.2",
    "@project-serum/borsh": "^0.2.5",
    "@project-serum/serum": "^0.13.61",
    "@pythnetwork/client": "^2.8.0",
    "@solana/spl-token-registry": "^0.2.2829",
    "@solana/spl-token-v2": "npm:@solana/spl-token@0.2.0",
    "@solana/wallet-adapter-base": "^0.9.4",
    "@solana/wallet-adapter-react": "^0.15.3",
    "@solana/wallet-adapter-react-ui": "^0.9.5",
    "@solana/wallet-adapter-wallets": "^0.15.5",
    "@solana/web3.js": "^1.58.0",
    "@svgr/webpack": "^6.5.0",
    "@switchboard-xyz/sbv2-lite": "^0.1.5",
    "@switchboard-xyz/switchboard-api": "^0.2.159",
    "@types/chai": "^4.3.1",
    "@types/mocha": "^9.1.0",
    "@types/react-gtm-module": "^2.0.1",
    "@types/uuid": "^8.3.4",
    "@ubeswap/token-math": "^4.4.1",
    "axios": "^0.26.1",
    "bignumber.js": "^9.0.1",
    "bs58": "^5.0.0",
    "buffer-layout": "^1.2.2",
    "chai": "^4.3.6",
    "chart.js": "^3.7.1",
    "framer-motion": "^5",
    "graphql": "^16.3.0",
    "graphql-request": "^4.2.0",
    "js-sha256": "^0.9.0",
    "jsbi": "^4.2.0",
    "moment": "^2.29.2",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-chartjs-2": "^4.0.1",
    "react-dom": "17.0.2",
    "react-gtm-module": "^2.0.11",
    "sass": "^1.49.9",
    "swr": "^1.3.0",
    "uuid": "^8.3.2",
    "@netlify/plugin-nextjs": "4.29.2"
  },
  "devDependencies": {
    "@types/node": "17.0.21",
    "@types/react": "17.0.39",
    "eslint": "8.10.0",
    "eslint-config-next": "12.1.0",
    "typescript": "4.5.5"
  },
  "resolutions": {
    "@solana/buffer-layout": "3.0.0",
    "@jup-ag/core": "1.0.0-beta.26"
  }

**To Reproduce**
Steps to reproduce the behavior:
1. inject the <WalletMultiButton /> into APP
2. run NEXT project 
3. Get on the page on which there is the <WalletMultiButton />
4. See the warning in browser dev tool

Enviornment

jordaaash commented 1 year ago

When using Next, you need to wrap components that can change from the server side render to client side render using dynamic. See this example:

https://github.com/solana-labs/wallet-adapter/blob/98be91396f1d586761451c23c80c4cf54c101567/packages/starter/example/src/pages/index.tsx#L8-L11

jordaaash commented 1 year ago

See https://github.com/solana-labs/wallet-adapter/issues/648 for more.