Heroku部署Parcel项目时无法安装@parcel/transformer-sass

我使用Parcel作为包打包工具，整个应用部署在Heroku上，项目分为客户端和服务端两个目录。客户端使用SCSS进行样式开发，依赖@parcel/transformer-sass编译SCSS文件，本地运行一切正常，但部署到Heroku时构建失败，报错信息如下：

> client@1.0.0 build
> parcel build index.html

Building...
🚨 Build failed.

@parcel/package-manager: Could not find module "@parcel/transformer-sass", but 
it was listed in package.json. Run your package manager first.
  /tmp/build_b6e0e662/client/package.json:22:5
    21 |   "devDependencies": {
> 22 |     "@parcel/transformer-sass": "^2.7.0",
>    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^ Defined here, but not installed
    23 |     "parcel": "^2.7.0",
    24 |     "process": "^0.11.10"


-----> Build failed

We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys

Some possible problems:

- Dangerous semver range (>) in engines.node
  https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version

Love,
Heroku

!     Push rejected, failed to compile Node.js app.
!     Push failed

根目录package.json文件 #

{
  "name": "thexpensetracker",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "npm run serve",
    "build": "cd client && npm install && npm run build",
    "serve": "cd server && npm install && npm run serve",
    "dev": "concurrently \"npm run client\" \"npm run server\"",
    "server": "cd server && npm run dev",
    "client": "cd client && npm run dev"
  },
  "engines": {
    "node": ">=14.19.0"
  },
  "keywords": [
    "example",
    "heroku"
  ],
  "author": "Abajit Dey",
  "license": "ISC",
  "devDependencies": {
    "concurrently": "^7.3.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.2",
    "express": "^4.18.1",
    "parcel": "^2.7.0"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "cookie-parser": "^1.4.6",
    "cors": "^2.8.5",
    "firebase": "^9.10.0",
    "http-proxy-middleware": "^2.0.6",
    "jsonwebtoken": "^8.5.1"
  }
}

客户端目录package.json文件 #

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-event-observer": "^0.5.11",
    "react-hook-form": "^7.35.0",
    "react-router-dom": "^6.4.0",
    "zustand": "^4.1.1"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.7.0",
    "parcel": "^2.7.0",
    "process": "^0.11.10"
  }
}

我在部署前已经执行过parcel build操作，但问题仍然存在。

解决方案 #

• 调整依赖位置：Heroku默认不会安装devDependencies，把客户端package.json里的@parcel/transformer-sass从devDependencies移到dependencies中，这样部署时会自动安装这个依赖。
• 修改build脚本：在根目录的build命令里，给npm install加上--include=dev参数，强制安装dev依赖，修改后的脚本为：

  "build": "cd client && npm install --include=dev && npm run build"
  

• 指定Node版本：Heroku提示engines.node的范围>=14.19.0存在风险，建议指定具体版本，比如改为"node": "14.19.0"或更精确的范围，避免版本兼容问题。

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