无法在本地运行旧版Next.js+Strapi项目仓库求助

项目背景 #

我正尝试将一个基于Next JS和Strapi 3构建的网页项目在本地运行，后续计划更新其中部分过时依赖。自Strapi 4发布后，团队在更新页面内容时遇到问题，我想帮忙解决，但目前连本地运行都卡住了，希望得到建议。

文件夹结构 #

• backend
  • api：包含Strapi的config、controllers、models、services文件夹
  • components：包含Vue JS的layout、links、meta、sections文件夹
  • config：database.js、server.js
  • extensions：集成了JSON Web Token
  • public：存放网站图标和图片的uploads文件夹
  • 根文件：.editorconfig、.eslintrc、.strapi-updater.json、package.json、yarn.lock
• frontend
  • components：包含React JS的elements和sections文件夹
  • packages：eslint-config-ibmdotcom & stylelint-config-ibmdotcom
  • pages：_app.js、_document.js和[[...slug]].js（Next JS可选全捕获路由）
  • patches：carbon ibmdotcom、carbon type和patch package补丁
  • public：网站所用的部分图标
  • styles：global.scss
  • utils：api.js、media.js和types.js
  • 根文件：.eslintrc、.lintstagedrc、.stylelintrc、jsconfig.json、package.json、yarn.lock
• node_modules
• patches
• 项目根文件：.yarnclean、package-lock.json、package.json、yarn.lock

依赖信息 #

frontend/package.json #

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --port 3200",
    "build": "next build",
    "start": "next start --port 3400",
    "postinstall": "patch-package",
    "debug": "NODE_OPTIONS='--inspect' next --port 3300"
  },
  "dependencies": {
    "@carbon/ibmdotcom-react": "^1.14.0",
    "@carbon/ibmdotcom-styles": "^1.14.0",
    "@carbon/icons-react": "^10.22.0",
    "@carbon/pictograms-react": "^11.0.0",
    "carbon-components-react": "^7.26.0",
    "formik": "^2.2.6",
    "next": "10.0.5",
    "next-seo": "^4.17.0",
    "patch-package": "^6.2.2",
    "postinstall-postinstall": "^2.1.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-hook-form": "^6.14.2",
    "sass": "^1.32.2",
    "yup": "^0.32.8"
  },
  "devDependencies": {
    "eslint": "^7.17.0"
  }
}

backend/package.json #

{
  "name": "backend",
  "private": true,
  "version": "0.1.0",
  "description": "A Strapi application",
  "scripts": {
    "develop": "strapi develop",
    "start": "strapi start",
    "build": "strapi build",
    "strapi": "strapi"
  },
  "devDependencies": {},
  "dependencies": {
    "knex": "<0.20.0",
    "pg": "^8.5.1",
    "sqlite3": "latest",
    "strapi": "3.4.3",
    "strapi-admin": "3.4.3",
    "strapi-connector-bookshelf": "3.4.3",
    "strapi-plugin-content-manager": "3.4.3",
    "strapi-plugin-content-type-builder": "3.4.3",
    "strapi-plugin-email": "3.4.3",
    "strapi-plugin-img": "^1.0.1",
    "strapi-plugin-upload": "3.4.3",
    "strapi-plugin-users-permissions": "3.4.3",
    "strapi-utils": "3.4.3"
  },
  "author": {
    "name": "A Strapi developer"
  },
  "strapi": {
    "uuid": "c78c2abc-df48-4be1-8dcf-1266d358a02b"
  },
  "engines": {
    "node": ">=10.16.0 <=14.x.x",
    "npm": ">=6.0.0"
  },
  "license": "MIT"
}

已尝试的步骤及错误 #

1. 执行 npm install，报错：

> website@1.0.0 postinstall
> patch-package

sh: patch-package: command not found
npm ERR! code 127
npm ERR! path /Users/sgt/Documents/Stroma/website
npm ERR! command failed
npm ERR! command sh -c patch-package

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sgt/.npm/_logs/2022-09-02T09_46_38_695Z-debug-0.log

2. 执行 npm i patch-package 后再次运行 npm install，报错：

added 50 packages, and audited 68 packages in 5s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
sgt@mb-sgt website % npm install              

> website@1.0.0 postinstall
> patch-package

patch-package 6.4.7
Applying patches...

**ERROR** Failed to apply patch for package patch-package at path
  
    node_modules/patch-package

  This error was caused because patch-package has changed since you
  made the patch file for it. This introduced conflicts with your patch,
  just like a merge conflict in Git when separate incompatible changes are
  made to the same piece of code.

  Maybe this means your patch file is no longer necessary, in which case
  hooray! Just delete it!

  Otherwise, you need to generate a new patch file.

  To generate a new one, just repeat the steps you made to generate the first
  one.

  i.e. manually make the appropriate file changes, then run 

    patch-package patch-package

  Info:
    Patch file: patches/patch-package+6.2.2.patch
    Patch was made for version: 6.2.2
    Installed version: 6.4.7

---
patch-package finished with 1 error(s).

up to date, audited 68 packages in 1s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

3. 执行 npx patch-package patch-package --exclude 'nothing'，输出：

patch-package 6.4.7
patch-package: you have both yarn.lock and package-lock.json
Defaulting to using npm
You can override this setting by passing --use-yarn or deleting
package-lock.json if you don't need it

• Creating temporary folder
• Installing patch-package@6.4.7 with npm
• Diffing your files with clean files
⁉️  Not creating patch file for package 'patch-package'
⁉️  There don't appear to be any changes.

问题 #

请问问题出在哪里？我的解决方法是否正确？

解决方案 #

核心问题分析 #

1. 包管理器冲突：项目根目录同时存在yarn.lock和package-lock.json，导致npm和yarn的依赖解析逻辑混乱，是引发后续问题的根源之一。
2. patch-package版本不匹配：项目根目录的patches/patch-package+6.2.2.patch补丁是针对6.2.2版本的，但安装的是6.4.7版本，版本差异导致补丁无法正常应用。
3. postinstall脚本执行时机：项目根目录的package.json里有postinstall: patch-package脚本，但patch-package并未在根依赖中声明，导致首次执行npm install时找不到命令。

具体修复步骤 #

1. 统一包管理器：

   • 优先选择yarn（前后端目录均有yarn.lock），删除npm锁文件：

     rm package-lock.json
     

   • 用yarn重新安装根目录依赖：

     yarn install
     

2. 处理patch-package补丁冲突：

   • 删除针对patch-package的旧补丁文件：

     rm patches/patch-package+6.2.2.patch
     

   • 安装与frontend依赖一致的patch-package版本：

     yarn add patch-package@6.2.2 -D
     

   • 重新执行postinstall脚本：

     yarn run postinstall
     

3. 分别安装前后端依赖：

   • 进入backend目录安装依赖：

     cd backend && yarn install
     

   • 进入frontend目录安装依赖：

     cd ../frontend && yarn install
     

4. 启动项目：

   • 先启动Strapi后端：

     cd ../backend && yarn develop
     

   • 新开终端启动Next.js前端：

     cd frontend && yarn dev
     

额外建议 #

• 后续更新依赖时，单独处理frontend和backend的依赖，避免跨目录的依赖冲突。
• Strapi 3升级到Strapi 4需要较大改动，建议先确保本地能正常运行现有项目，再逐步研究官方迁移文档。

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