tsc not found in typescript express and react app when deploying to heroku

Question

I am working on an express app(in typescript) and a react app bootstrapped with create-react-app(in js). The directory structure is here. The server directory contains code for server which is inside server/src and is written in typescript(output into server/dist on building). Similarly the code for react is inside /src and on building generates the /build directory.

The problem is when deploying to heroku, the command tsc is not working and thus build fails The stack trace is -


2020-11-29T10:11:12.328622+00:00 app[web.1]: > cd server && yarn start
2020-11-29T10:11:12.781818+00:00 app[web.1]: yarn run v1.22.10
2020-11-29T10:11:12.832721+00:00 app[web.1]: $ tsc & node .
2020-11-29T10:11:12.850144+00:00 app[web.1]: /bin/sh: 1: tsc: not found
2020-11-29T10:11:12.905249+00:00 app[web.1]: internal/modules/cjs/loader.js:303
2020-11-29T10:11:12.905252+00:00 app[web.1]: throw err;
2020-11-29T10:11:12.905253+00:00 app[web.1]: ^
2020-11-29T10:11:12.905253+00:00 app[web.1]:

How should i include it in the package.json(s) so that this command is recognised in the heroku deployment environment.

Package.json scripts for React app is

"scripts": {
    "startClient": "react-scripts start",
    "buildClient": "react-scripts build",
    "build": "react-scripts build && (cd server && yarn install)",
    "start":"cd server && yarn start",
    "devServer":"cd server && yarn dev",
    "tsc": "tsc",  // 1)
    "postinstall": "yarn tsc" // 2)
  },

1 & 2 were added following the suggestion in How do I compile Typescript at Heroku postinstall? .

The package.json script for server app is

"scripts": {
    "build":"tsc",
    "start":"tsc & node .",   // this is the command which fails
    "dev":"tsc -w & nodemon ."
  },

i know i have to configure that postinstall so that tsc is recognised but i am not able to understand in which of the package.json's scripts i should add it to? Would appreciate if you could clarify on which one to add it to and why is that so that tsc isn't recognised. Alternatively, can i directly use npx tsc or is that not recommended ?

you need to return frontend build index.html on request https : // domen/ — kroken react
– kroken react, Commented Nov 29, 2020 at 12:40
@krokenreact the project works locally as intended and yes, i am returning the build/index.html on request. the problem is when deploying to heroku only. it is related to heroku not able to determine what tsc is instead of looking for it in node packages. — pg07
– pg07, Commented Nov 29, 2020 at 12:57
there is no typescript in the built app. you need to build the app first and push to heroku — kroken react
– kroken react, Commented Nov 29, 2020 at 13:00
i am building the app on heroku itself. Instead of uploading the precompiled dist directory, I want to compile ts to js src in heroku itself using tsc. — pg07
– pg07, Commented Nov 29, 2020 at 13:53
You should add typescript dependency in all the package.json where you need it. — Mathieu Seiler
– Mathieu Seiler, Commented Nov 30, 2020 at 10:34

ErrolTheHamster · Accepted Answer · 2022-05-10 22:17:58Z

0

I ran into a similar issue and am not certain its the same as what you encountered but posting anyways in case its helpful to someone else.

I'm using the heroku/nodejs build pack and it looks like it runs tasks in the following order:

Creating runtime environment
...
Installing dependencies
Build
Pruning devDependencies
...

After the build completes successfully, the container is started with the command npm 'start' which in your case calls the tsc command which no longer exists if you installed it as a dev dependency (since it was pruned).

My solution was to move tsc out of the start step and leave it as node .

answered May 10, 2022 at 22:17

ErrolTheHamster

511 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

tsc not found in typescript express and react app when deploying to heroku

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related