Heroku部署前端应用遇npm ci同步失败及依赖版本冲突求助

初始报错 #

本地应用运行正常，但执行npm ci及Heroku部署时均触发以下错误：

npm ci can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with npm install before continuing.

初步处理后的残留问题 #

删除package-lock.json、node_modules目录，清理npm缓存并在package.json中添加engines配置后，npm ci仍报错：

Invalid: lock file's typescript@5.3.3 does not satisfy typescript@4.9.5

注：typescript未在package.json中显式定义

补充处理后的Heroku部署报错 #

通过直接安装Typescript@4.9.5解决本地问题后，Heroku部署仍出现批量同步错误：

remote: npm ERR! npm ci can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with npm install before continuing.
remote: npm ERR!
remote: npm ERR! Missing: @mui/material@5.14.20 from lock file
remote: npm ERR! Invalid: lock file's @babel/runtime@7.16.7 does not satisfy @babel/runtime@7.23.5
remote: npm ERR! Missing: @mui/base@5.0.0-beta.26 from lock file
remote: npm ERR! Missing: @mui/core-downloads-tracker@5.14.20 from lock file
remote: npm ERR! Missing: @mui/system@5.14.20 from lock file
remote: npm ERR! Missing: @mui/types@7.2.10 from lock file
remote: npm ERR! Missing: @mui/utils@5.14.20 from lock file
remote: npm ERR! Invalid: lock file's @types/react-transition-group@4.4.4 does not satisfy @types/react-transition-group@4.4.10
remote: npm ERR! Missing: clsx@2.0.0 from lock file
remote: npm ERR! Invalid: lock file's csstype@3.0.10 does not satisfy csstype@3.1.3
remote: npm ERR! Missing: react-is@18.2.0 from lock file
remote: npm ERR! Invalid: lock file's react-transition-group@4.4.2 does not satisfy react-transition-group@4.4.5
remote: npm ERR! Missing: regenerator-runtime@0.14.0 from lock file
remote: npm ERR! Missing: @floating-ui/react-dom@2.0.4 from lock file
remote: npm ERR! Invalid: lock file's @popperjs/core@2.11.2 does not satisfy @popperjs/core@2.11.8
remote: npm ERR! Missing: clsx@2.0.0 from lock file
remote: npm ERR! Missing: @floating-ui/dom@1.5.3 from lock file
remote: npm ERR! Missing: @floating-ui/core@1.5.2 from lock file
remote: npm ERR! Missing: @floating-ui/utils@0.1.6 from lock file
remote: npm ERR! Missing: @mui/private-theming@5.14.20 from lock file
remote: npm ERR! Missing: @mui/styled-engine@5.14.20 from lock file
remote: npm ERR! Missing: clsx@2.0.0 from lock file
remote: npm ERR! Invalid: lock file's @emotion/cache@11.7.1 does not satisfy @emotion/cache@11.11.0
remote: npm ERR! Missing: @emotion/memoize@0.8.1 from lock file
remote: npm ERR! Invalid: lock file's @emotion/sheet@1.1.0 does not satisfy @emotion/sheet@1.2.2
remote: npm ERR! Invalid: lock file's @emotion/utils@1.0.0 does not satisfy @emotion/utils@1.2.1
remote: npm ERR! Missing: @emotion/weak-memoize@0.3.1 from lock file
remote: npm ERR! Missing: stylis@4.2.0 from lock file
remote: npm ERR! Invalid: lock file's @types/prop-types@15.7.4 does not satisfy @types/prop-types@15.7.11
remote: npm ERR! Missing: react-is@18.2.0 from lock file

项目package.json内容 #

{
  "name": "recipe-app",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "20.9.0",
    "npm": "10.2.3"
  },
  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mars/heroku-js-runtime-env": "^3.0.2",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.24.0",
    "jwt-decode": "^3.1.2",
    "moment": "^2.29.1",
    "notistack": "^2.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*.js src/**/*.jsx",
    "lint:fix": "eslint src/**/*.js src/**/*.jsx --fix"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "eslint": "^7.32.0",
    "eslint-config-google": "^0.14.0",
    "eslint-plugin-react": "^7.28.0",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.15"
  }
}

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