Next.js开发Web3应用时@irys/sdk报nodeCrypto未定义错误

1. 补全必要依赖 #

先确保安装了所有需要的浏览器端Node.js核心模块替代包：

npm install crypto-browserify stream-browserify buffer process

2. 完善next.config.js配置 #

仅配置别名不够，需要补充webpack的fallback和全局变量注入，同时强制转译相关依赖包：

const webpack = require('webpack');

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 强制转译@noble/ed25519和@irys/sdk，解决开发环境模块解析问题
  transpilePackages: ['@noble/ed25519', '@irys/sdk'],
  
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 客户端环境替换Node.js核心模块
      config.resolve.fallback = {
        ...config.resolve.fallback,
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify'),
        buffer: require.resolve('buffer'),
        process: require.resolve('process/browser'),
      };
      
      // 注入process和Buffer全局变量，匹配Node.js环境
      config.plugins.push(
        new webpack.ProvidePlugin({
          process: 'process/browser',
          Buffer: ['buffer', 'Buffer'],
        })
      );
    }
    return config;
  },
};

module.exports = nextConfig;

3. 清除缓存并重启开发服务 #

缓存可能导致配置不生效，执行以下命令后重新启动开发服务器：

rm -rf .next node_modules/.cache && npm run dev

问题原因说明 #

开发环境下Next.js的Webpack默认不会自动处理Node.js核心模块的浏览器端替代，而生产环境的打包流程会自动兼容这类依赖；同时@noble/ed25519使用ES模块，开发环境未强制转译时，会导致crypto相关全局变量未被正确注入，从而触发nodeCrypto is not defined错误。

内容的提问来源于stack exchange，提问作者Hoàng Đức Bách