构建OpenSea 2.0克隆时遇ChainId未定义错误求助

错误原因 #

代码里使用了ChainId但未正确导入，同时JSX属性写法存在语法错误。

解决方案 #

根据你使用的thirdweb版本，按以下步骤修改：

情况1：使用thirdweb v3版本 #

1. 导入ChainId：在pages/_app.js顶部添加导入语句

import { ThirdWebProvider, ChainId } from "@thirdweb-dev/react";

2. 修正JSX属性语法：调整desiredChainId和chainRPC的写法，去掉多余大括号并正确传递属性

function MyApp({ Component, pageProps }) {
  return (
    <ThirdWebProvider
      desiredChainId={ChainId.Goerli}
      chainRPC={{
        [ChainId.Goerli]: "https://goerli.infura.io/v3/e5f83ad2d2814ff69492f524bd8a50a0"
      }}
    >
      <Component {...pageProps} />
    </ThirdWebProvider>
  );
}

export default MyApp;

情况2：使用thirdweb v4版本 #

v4版本中ChainId已替换为Chain枚举，也可直接使用链ID数字（Goerli的链ID是5）：

1. 导入依赖：

import { ThirdWebProvider, Chain } from "@thirdweb-dev/react";

2. 修改组件代码：

function MyApp({ Component, pageProps }) {
  return (
    <ThirdWebProvider
      desiredChainId={Chain.Goerli}
      // 也可直接写 desiredChainId={5}
      chainRPC={{
        [Chain.Goerli]: "https://goerli.infura.io/v3/e5f83ad2d2814ff69492f524bd8a50a0"
      }}
    >
      <Component {...pageProps} />
    </ThirdWebProvider>
  );
}

export default MyApp;

额外检查 #

• 确认依赖安装正确：在Replit终端运行npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers@5（v3版本）或npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers（v4版本）
• 确保你的Infura API密钥有效，URL格式无误

内容的提问来源于stack exchange，提问作者Anindya Chakrabarty