Nuxt3结合Pinia使用eth-ens-namehash时遇punycode外部化错误求助

问题原因 #

Nuxt3为了浏览器兼容性，会将Node.js核心模块（比如punycode）外部化，导致客户端代码无法直接访问punycode.ucs2，而@ensdomains/eth-ens-namehash依赖该模块完成域名解析。

解决方案步骤： #

1. 安装punycode依赖

浏览器环境默认不包含该模块，需手动安装：

npm install punycode
# 或使用yarn
yarn add punycode

2. 配置Nuxt3的nuxt.config.ts

添加别名配置，让客户端能正确解析punycode：

export default defineNuxtConfig({
  alias: {
    punycode: 'punycode/punycode.js'
  }
})

3. 优化Pinia Store代码

Nuxt3已默认处理Buffer的polyfill，无需全局挂载，修改后的代码：

import { defineStore } from "pinia"
import namehash from "@ensdomains/eth-ens-namehash"

export const useExampleStore = defineStore('example', {
  state: () => ({
    hash: ''
  }),
  actions: {
    generateHash(input) {
      this.hash = namehash.hash(input).toString()
    }
  }
})

验证 #

重启Nuxt项目后，调用generateHash方法即可正常生成ENS名称哈希，不会再触发punycode相关错误。

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