[Bug] 最新版本的antd和@ant-design/web3包报错：Can't resolve 'encoding'/ Can't resolve 'pino-pretty'，官网课程示例不生效

[SilenceRichard]

What happens?

本地运行官网提供的连接钱包示例，编译器报错，页面无法正常展示

How To Reproduce

Steps to reproduce the behavior: 1. 2.

1. 安装ant-design-web3以及相关插件

   
    npm i @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save

2. 本地执行npm run dev

3. 无法正常访问http://localhost:3000/web3,编译器报错

4. 错误日志

   
   Module not found: Can't resolve 'encoding' in '/Users/fengge/Documents/coding/wtf-dapp-demo/node_modules/.pnpm/@metamask+sdk@0.30.1_nnrd3gsncyragczmpvfhocinkq/node_modules/@metamask/sdk/dist/node/es'

Import trace for requested module: ./node_modules/.pnpm/@metamask+sdk@0.30.1_nnrd3gsncyragczmpvfhocinkq/node_modules/@metamask/sdk/dist/node/es/metamask-sdk.js ./node_modules/.pnpm/@wagmi+connectors@5.4.0_aswt33tmrogfmzqpzq3dhbvogy/node_modules/@wagmi/connectors/dist/esm/metaMask.js ./node_modules/.pnpm/@wagmi+connectors@5.4.0_aswt33tmrogfmzqpzq3dhbvogy/node_modules/@wagmi/connectors/dist/esm/exports/index.js ./node_modules/.pnpm/wagmi@2.12.33_33ju27x7q237qze4wqayztwdou/node_modules/wagmi/dist/esm/exports/connectors.js ./node_modules/.pnpm/@ant-design+web3-wagmi@2.9.3_etmdvdxm6zy3xoz4ig6e6fvagu/node_modules/@ant-design/web3-wagmi/dist/esm/wagmi-provider/index.js ./node_modules/.pnpm/@ant-design+web3-wagmi@2.9.3_etmdvdxm6zy3xoz4ig6e6fvagu/node_modules/@ant-design/web3-wagmi/dist/esm/index.js ./app/web3/page.tsx

./node_modules/.pnpm/pino@7.11.0/node_modules/pino/lib/tools.js Module not found: Can't resolve 'pino-pretty' in '/Users/fengge/Documents/coding/wtf-dapp-demo/node_modules/.pnpm/pino@7.11.0/node_modules/pino/lib'

Import trace for requested module: ./node_modules/.pnpm/pino@7.11.0/node_modules/pino/lib/tools.js ./node_modules/.pnpm/pino@7.11.0/node_modules/pino/pino.js ./node_modules/.pnpm/@walletconnect+logger@2.1.2/node_modules/@walletconnect/logger/dist/index.es.js ./node_modules/.pnpm/@walletconnect+universal-provider@2.17.0/node_modules/@walletconnect/universal-provider/dist/index.es.js ./node_modules/.pnpm/@walletconnect+ethereum-provider@2.17.0_ryhct6r6jz2fex4xfo2quarxhi/node_modules/@walletconnect/ethereum-provider/dist/index.es.js ./node_modules/.pnpm/@wagmi+connectors@5.4.0_aswt33tmrogfmzqpzq3dhbvogy/node_modules/@wagmi/connectors/dist/esm/walletConnect.js ./node_modules/.pnpm/@wagmi+connectors@5.4.0_aswt33tmrogfmzqpzq3dhbvogy/node_modules/@wagmi/connectors/dist/esm/exports/index.js ./node_modules/.pnpm/wagmi@2.12.33_33ju27x7q237qze4wqayztwdou/node_modules/wagmi/dist/esm/exports/connectors.js ./node_modules/.pnpm/@ant-design+web3-wagmi@2.9.3_etmdvdxm6zy3xoz4ig6e6fvagu/node_modules/@ant-design/web3-wagmi/dist/esm/wagmi-provider/index.js ./node_modules/.pnpm/@ant-design+web3-wagmi@2.9.3_etmdvdxm6zy3xoz4ig6e6fvagu/node_modules/@ant-design/web3-wagmi/dist/esm/index.js ./app/web3/page.tsx

**Expected behavior** 1. 2.

将依赖包替换为[官方示例依赖包](https://github.com/ant-design/ant-design-web3-demo)后，重新安装依赖，可以正常运行项目
```diff
{
  "name": "wtf-dapp-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@tanstack/react-query": "^5.60.5",
+   "@ant-design/web3": "^1.17.0",
-   "@ant-design/web3": "^1.18.0",
    "@ant-design/web3-wagmi": "^2.9.0",
+   "antd": "^5.12.5",
-   "antd": "^5.22.1",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18",
    "wagmi": "^2.5.2",
    "viem": "^2.0.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

Context

• Ant Design Web3 Version: ^1.18.0
• Ant Design Version: ^5.22.1
• Node Version: 18.18.2
• Platform: macos

[gin-lsl]

你可能需要将 pino-pretty 这个包手动安装到你的项目里面： npm i pino-pretty

前两天也有发现这个问题，不过很奇怪官网在构建部署的时候却不会报错。

[SilenceRichard]

你可能需要将 pino-pretty 这个包手动安装到你的项目里面： npm i pino-pretty

前两天也有发现这个问题，不过很奇怪官网在构建部署的时候却不会报错。

所以这个是因为antd或者ant-design-web3升级导致的吗，感觉教程示例也需要限制这两个包的版本🤔️？

[gin-lsl]

之前遇到是因为 @ant-design/web3-solana 依赖的 @walletconnect/* 里面有用到这个 pino-pretty，但是我看你这里其实没用到 @walletconnect。

可以在 pnpm-lock.yaml 里面找下 pino-pretty， 检查下是谁依赖的。

[gin-lsl]

哦，看到了，也有 walletconnect

[SilenceRichard]

我降到仓库demo的版本可以生效

[thinkasany]

好像这样也可以解。

https://github.com/WalletConnect/walletconnect-monorepo/issues/1908

[gin-lsl]

好像这样也可以解。

竟然是这么早的 issue，好奇怪我之前竟然没遇到这个问题🧐

[SilenceRichard]

好像这样也可以解。

WalletConnect/walletconnect-monorepo#1908

感谢🙏