Next.js升级以太坊项目报path.resolve is not a function问题求助

根本原因 #

path是Node.js专属核心模块，仅可在服务端运行环境调用。你遇到的报错是因为包含path.resolve逻辑的factory.js被打包进了客户端侧运行的代码 bundle 中，浏览器环境没有内置path模块，所以触发了该错误；服务端运行时是Node环境，因此执行正常。

排查解决思路 #

• 方案1：拆分执行逻辑，避免客户端侧调用Node模块
  • 若使用Pages Router：将ABI读取、合约实例初始化逻辑放到getServerSideProps/getStaticProps这类仅在服务端执行的生命周期函数中，将初始化完成的合约实例或者ABI内容作为props传递给页面组件，客户端直接使用传入的参数即可，不要在组件顶层直接引入factory.js执行路径读取逻辑。
  • 若使用App Router：ABI读取、合约初始化逻辑仅在未标记'use client'的服务端组件中执行，需要在客户端组件调用合约方法时，将ABI或者已初始化的合约方法封装后作为props传递给客户端组件，不要在客户端组件中直接引入factory.js。
• 方案2：直接静态导入ABI文件（最推荐）
  无需通过path和fs模块运行时读取ABI文件，直接将编译好的ABI文件作为JSON模块导入，服务端、客户端都可正常执行，示例代码如下：

  // 调整factory.js中的ABI导入逻辑，替换原path.resolve+fs读取的代码
  import CampaignFactoryABI from './path/to/CampaignFactory.abi' assert { type: 'json' };
  

• 方案3：添加Node模块polyfill（不推荐）
  若必须保留原有路径读取逻辑，可安装path-browserifypolyfill，在next.config.js中配置客户端打包时将path模块替换为对应的浏览器兼容包，该方案会增加客户端包体积，非必要不选择。

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