Next.js使用next-stripe报错Can't resolve './dist/client'如何修复

报错由next-stripe npm包的发布故障导致：包维护者发布公网版本时，遗漏了构建生成的dist目录，包根目录入口client.js默认指向不存在的./dist/client路径，包内实际仅存放未编译的src源码目录，因此所有环境执行npm安装后都会触发模块解析失败。本地手动修改node_modules内文件仅为本地临时生效的补丁，修改内容不会被纳入版本控制，Heroku部署流程会重新拉取安装全量依赖，本地临时修改无法同步到云端。

按实现成本从低到高排序：

方案1：直接引入源文件，绕过错误入口 #

无需修改第三方依赖代码，直接调整业务代码的引入路径即可：

• 将原有引入语句

  import { createCheckoutSession } from 'next-stripe/client'
  

  替换为直接指向src目录下的实际文件：

  import createCheckoutSession from 'next-stripe/src/client'
  

• 若部署时提示node_modules内代码未转译的语法错误，在项目根目录的next.config.js中添加转译配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    transpilePackages: ['next-stripe'],
  }
  module.exports = nextConfig
  

• 提交代码推送到Heroku即可正常部署，无额外依赖或脚本配置。

方案2：使用patch-package固化依赖补丁 #

如果希望保留原有引入写法，可通过补丁工具在依赖安装完成后自动修正文件，适配所有部署环境：

1. 本地先将node_modules/next-stripe/client.js内的代码修改为可正常运行的版本：

   module.exports = require('./src/client').default
   

   确认本地运行无报错。
2. 安装补丁工具：执行命令npm install patch-package --save-dev
3. 生成对应版本的依赖补丁：执行命令npx patch-package next-stripe，执行完成后项目根目录会自动生成patches文件夹，内有对应版本next-stripe的修改记录文件。
4. 修改package.json的scripts配置，添加安装后自动执行补丁的钩子：

   {
     "scripts": {
       "postinstall": "patch-package"
     }
   }
   

   其余原有脚本保持不变即可。
5. 将patches文件夹、修改后的package.json/package-lock.json提交到git仓库，推送到Heroku后，平台执行npm install完成后会自动运行补丁脚本修正依赖文件，无需手动登录服务器操作。

• 不要尝试直接修改线上Heroku容器内的node_modules文件，Heroku容器为临时实例，重启或重新部署后所有修改都会被重置。
• 不要将本地修改后的node_modules整个提交到代码仓库，会大幅增加仓库体积，且极易触发跨环境依赖版本不一致的问题。

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