Heroku - devDependencies not being installed on build phase

General
1

I’m trying to deploy my first app to Heroku Per the documentation, Heroku build phase should install the devDependencies, right? But it always fail with tsc not found I even tried to add typescript as a dependency, not devDependency, the tsc worked during the build phase, but the frontend failed due to the @types/react not installed It should work and I’m not sure why it’s not working

I have this structure currently:

- backend
-- package.json
-- src
- frontend
-- package.json
-- src
- build (this is in .gitignore and contains both backend and frontend builds)
- package.json
- Procfile

In my root package.json, I have:

{
...
  "scripts": {
    "test": "jest",
    "start": "cd build/backend/src && node index.js",
    "build": "cd frontend && yarn install && cd ../backend && yarn install"
  },
...
}

my Procfile: web: yarn start

backend package.json:

{
...
  "scripts": {
    "postinstall": "yarn run build",
    "build": "tsc --build --verbose && tsc-alias",
    "postbuild": "cp package.json ../build/backend/package.json && cp .env ../build/backend || : && cd ../build/backend && yarn install --prod",
    "start": "ts-node-dev -r tsconfig-paths/register --project ./tsconfig.json ./src/index.ts --diagnostics --ignore-watch node_modules",
    "test": "jest"
  },
  "devDependencies": {
    ...
    "tsc-alias": "^1.8.10",
    "typescript": "^5.0.4"
    ...
  }
...
}

and my frontend package.json:

{
...
  "scripts": {
    "postinstall": "yarn run build",
    "start": "vite",
    "build": "tsc --build --verbose && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "devDependencies": {
    ...
    "@types/react": "^18.3.3",
    "typescript": "^5.2.2"
    ...
  }
...
}

[EDIT]

Got it working by with this workaround on my root package.json, I’m not sure if this is the best option

{
...
    "scripts": {
    "test": "jest",
    "start": "cd build/backend/src && node index.js",
    "postinstall": "cd frontend && yarn install --production=false && cd ../backend && yarn install --production=false",
    "build": "cd frontend && yarn build && cd ../backend && yarn build"
  },
...
}
2

postinstallscript:** Instead of runningyarn install` twice, combine them into a single command:

JSON

"postinstall": "cd frontend && yarn install --production=false && cd ../backend && yarn

build script: Remove the unnecessary yarn install steps:

JSON

"build": "cd frontend && yarn build && cd ../backend && yarn build"

Backend package.json:

  • devDependencies: Ensure that typescript and tsc-alias are listed as dependencies in the backend package.json to avoid potential conflicts during the build phase:

JSON

"dependencies": {
  "typescript": "^5.0.4",
  "tsc-alias": "^1.8.10",
  // Other dependencies...
}

Frontend package.json:

  • devDependencies: Ensure that @types/react is listed as a dependency in the frontend package.json to avoid errors during the build:

JSON

"dependencies": {
  "@types/react": "^18.3.3",
  // Other dependencies...
}

Procfile:

  • web process: The web process in your Procfile should point to the correct script within your frontend project. Ensure it matches the start script in your frontend package.json :

web: yarn start

Additional Considerations:

  • Heroku Configuration: Verify that your Heroku app is configured with the correct buildpack (e.g., heroku/nodejs ).
  • Environment Variables: If your app uses environment variables, ensure they are set in Heroku’s settings or using a .env file.
  • Heroku Logs: Check Heroku’s logs for any error messages that might provide more clues about the deployment issues.

Revised package.json (Root):

JSON

{
  // ...
  "scripts": {
    "test": "jest",
    "start": "cd build/backend/src && node index.js",
    "postinstall": "cd frontend && yarn install --production=false && cd ../backend && yarn install --production=false",
    "build": "cd frontend && yarn build && cd ../backend && yarn build"
  },
  // ...
}

Revised Backend package.json:

JSON

{
  // ...
  "dependencies": {
    "typescript": "^5.0.4",
    "tsc-alias": "^1.8.10",
    // Other dependencies...
  },
  // ...
}

Revised Frontend package.json:

JSON

{
  // ...
  "dependencies": {
    "@types/react": "^18.3.3",
    // Other dependencies...
  },
  // ...
}