构建报错求助：ThirdwebSDK代码异常及无法解析'./error'问题

项目构建时触发“无法解析'./error'”错误，导致构建中断，涉及ThirdwebSDK初始化、ethers.Wallet配置，以及Portfolio组件中Sanity与ThirdWeb代币数据获取逻辑，以下是针对性排查和修复方案：

一、依赖版本冲突或缺失 #

ThirdwebSDK与ethers.js存在版本依赖绑定，版本不匹配会导致内部模块解析失败（比如找不到'./error'这类内部文件）。

• 操作：检查package.json中thirdweb和ethers的版本，确保符合官方要求（如Thirdweb v4要求ethers v5.x）。执行以下命令重装依赖：

rm -rf node_modules package-lock.json
npm install thirdweb@latest ethers@5

二、ThirdwebSDK初始化问题 #

代码中SDK初始化存在两处问题，可能触发内部错误：

1. Infura URL缺少项目API密钥，导致节点连接失败；
2. 私钥使用NEXT_PUBLIC_前缀的环境变量，会暴露到前端，且可能因变量未正确加载导致钱包初始化失败。

• 修复：
  1. 补充Infura URL的API密钥：https://goerli.infura.io/v3/你的Infura项目ID；
  2. 将私钥移至非公开环境变量（移除NEXT_PUBLIC_前缀），仅在后端或测试环境使用；
  3. 修正初始化代码：

const sdk = new ThirdwebSDK(
  new ethers.Wallet(
    process.env.PRIVATE_KEY, // 在.env.local中配置该变量
    ethers.getDefaultProvider(
      'https://goerli.infura.io/v3/你的Infura项目ID'
    ),
  ),
);

三、Portfolio组件异步逻辑错误 #

useEffect中设置thirdWebTokens时，误用了异步更新前的sanityTokens状态，导致遍历空数组触发SDK内部错误，进而引发模块解析异常。

• 修复：直接使用刚获取的SanityTokens变量生成代币模块，而非依赖状态：

const Portfolio = () => {
  const [sanityTokens, setSanityTokens] = useState([])
  const [thirdWebTokens, setThirdWebTokens] = useState([])
  
  useEffect(() => {
    const getSanityAndThirdWebTokens = async () => {
      const coins = await fetch("你的Sanity API地址");
      const SanityTokens = (await coins.json()).result;
      setSanityTokens(SanityTokens);
      // 使用刚获取的SanityTokens而非状态变量
      const tokenModules = SanityTokens.map(token => sdk.getTokenModule(token.contractAddress));
      setThirdWebTokens(tokenModules);
    };
    getSanityAndThirdWebTokens();
  }, [])

  console.log('sanity ⚰️', sanityTokens)
  console.log('sanity 💈', thirdWebTokens)
};

四、构建缓存问题 #

Next.js或webpack的缓存可能导致模块解析异常，尤其是依赖更新后缓存未同步。

• 操作：执行npm run build --no-cache，或手动删除.next（Next.js项目）、dist等构建目录后重新构建。

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