Next.js 13.0.04引入@lens-protocol/wagmi遇CJS模块不支持错误如何解决？

使用Next.js 13.0.4版本，引入@lens-protocol/wagmi和wagmi包后，运行应用出现以下错误：

error - unhandledRejection: Error [ERR_REQUIRE_ESM]: require() of ES Module /.../node_modules/wagmi/dist/index.js from /.../node_modules/@lens-protocol/wagmi/dist/lens-protocol-wagmi.cjs.dev.js not supported. Instead change the require of index.js in /.../node_modules/@lens-protocol/wagmi/dist/lens-protocol-wagmi.cjs.dev.js to a dynamic import() which is available in all CommonJS modules.

当前next.config.js配置如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    });
    return config;
  }
};

module.exports = nextConfig;

1. 修改Next.js配置转译ES模块包 #

在next.config.js中添加transpilePackages配置，让Next.js主动转译wagmi和@lens-protocol/wagmi，解决模块格式不兼容问题：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['wagmi', '@lens-protocol/wagmi'],
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    });
    return config;
  }
};

module.exports = nextConfig;

2. 对齐包版本兼容性 #

如果配置修改后仍报错，检查两个包的版本是否匹配：

• 查看@lens-protocol/wagmi官方文档，确认它依赖的wagmi主版本号
• 安装匹配版本（示例命令，以官方兼容说明为准）：

npm install wagmi@^0.12.0 @lens-protocol/wagmi@^0.2.0

3. 统一使用ES模块导入语法 #

确保代码里只用import语法引入包，避免使用CommonJS的require()：

// 正确写法
import { useAccount } from 'wagmi';
import { useLensProfile } from '@lens-protocol/wagmi';

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