search

ant-design / ant-design-web3

🥳 Efficient react components for building dapps easier | Connect crypto wallets and more Web3 UI components | Web3 icons | Supports Ethereum, Solana, Bitcoin, TON, Sui and others.
https://web3.ant.design
MIT License
829 stars 141 forks source link

Local environment development @ tanstack/react query dependency error #501

Closed shanchuan1 closed 5 months ago

shanchuan1 commented 8 months ago

image window环境 ，node v16.17.1 ，chrome v120.0.6099.217

yutingzhao1991 commented 7 months ago

https://github.com/ant-design/ant-design-web3/blob/main/packages/wagmi/src/wagmi-provider/index.tsx#L41 可能是这里的问题

shanchuan1 commented 7 months ago

https://github.com/ant-design/ant-design-web3/blob/main/packages/wagmi/src/wagmi-provider/index.tsx#L41 可能是这里的问题

替换useMemo包裹的mergedQueryClient，使用官网例子，问题还是存在 image image

yutingzhao1991 commented 7 months ago

所有涉及到 wagmi 的 demo 都有这个问题吗？还是只有个别 demo 有问题？

shanchuan1 commented 7 months ago

所有涉及到 wagmi 的 demo 都有这个问题吗？还是只有个别 demo 有问题？

所有用到WagmiWeb3ConfigProvider这个组件的demo都会有这个问题，初步判断是@tanstack/react-query库5.17.0版本存在问题

shanchuan1 commented 7 months ago

问题定位到了，wagmi的api: useConnect调用@tanstack/react-query的api: useMutation 参数存在差异， image image @yutingzhao1991

yutingzhao1991 commented 7 months ago

问题定位到了，wagmi的api: useConnect调用@tanstack/react-query的api: useMutation 参数存在差异， image image @yutingzhao1991

什么原因导致的这个差异？是在 windows 下才有这个问题吗？

beilunyang commented 7 months ago

尝试升级下Node版本试试 如：v20.10.0或更新版本 @shanchuan1

GoodbyeMyself commented 6 months ago

我发现 回退一个小版本 "@ant-design/web3-wagmi": "^2.3.0" 就正常了

yutingzhao1991 commented 5 months ago

我这边用 https://github.com/ant-design/ant-design-web3-demo 这个更新 node_modules 之后可以复现这个问题。

初步排查是在 nextjs 中项目构建的时候 @tanstack/react-query 引入了多个版本，导致 React 的 context 有问题。

有一个临时解决方案是在项目中单独安装一下 @tanstack/react-query 依赖，pnpm i @tanstack/react-query 可以解决这个问题。

具体怎么更好的解决要再研究下，相关代码在 https://github.com/ant-design/ant-design-web3/blob/main/packages/wagmi/src/wagmi-provider/index.tsx#L43

yutingzhao1991 commented 5 months ago

Solution: Install the peerDependencies dependency @tanstack/react-query in the project.