Next.js 13 App目录客户端组件导入wagmi包hardhat路径导出错误咨询

问题原因 #

直接导入wagmi内部的dist/chains路径，但wagmi的包配置里并未导出这个路径，属于引用了包的实现细节，导致ES模块解析时抛出Package path ./dist/chains is not exported from package错误。

解决方案 #

1. 修正导入路径 #

把错误的导入语句替换为wagmi官方提供的链模块入口：

如果使用wagmi v1：

import { hardhat } from "wagmi/chains";

如果使用wagmi v2：

import { hardhat } from "@wagmi/core/chains";
// 部分v2版本也支持 import { hardhat } from "wagmi/chains";

修改后的完整组件代码：

"use client";

import { Faucet } from "./scaffold-eth";
// 修正此处的导入路径
import { hardhat } from "wagmi/chains";
import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
import { useGlobalState } from "~~/services/store/store";
import { getTargetNetwork } from "~~/utils/scaffold-eth";

export default function NativeCurrencyPrice() {
  const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);

  return (
    <div className="flex space-x-2 pointer-events-auto">
      {nativeCurrencyPrice > 0 && (
        <div className="btn btn-primary btn-sm font-normal cursor-auto">
          <CurrencyDollarIcon className="h-4 w-4 mr-0.5" />
          <span>{nativeCurrencyPrice}</span>
        </div>
      )}
      {getTargetNetwork().id === hardhat.id && <Faucet />}
    </div>
  );
}

2. 验证依赖版本并清理缓存 #

• 检查package.json里wagmi的版本，确保和导入路径匹配。如果是v2版本，需确认安装了@wagmi/core依赖：

  npm install @wagmi/core
  # 或 yarn add @wagmi/core
  # 或 pnpm add @wagmi/core
  

• 清理缓存避免残留问题：

  # 删除依赖目录和锁文件
  rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
  # 重新安装依赖
  npm install
  # 清理Next.js缓存
  npx next clean
  

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