How can I deploy a MERN app written in typescrtipt to Heroku?-CodePudding

I cannot find a tutorial that shows how to do what I am trying to do and I have tried blending several tutorials that do similar things to no avail. I have an express server written in typescript and a react app written in typescript that run exactly as they should locally, but I am unable to deploy them to Heroku. The build fails while running tsc post-install, and the errors are a mix of "module not found", and "cannot use jsx without the --jsx flag". I'm not sure exactly what needs to change to make it happen.

No dependencies are installed as devdependancies. Running tsc locally shows no errors.

My package.json:

{
  "name": "inventory",
  "version": "1.0.0",
  "description": "Odin Project inventory project",
  "main": "source/server.ts",
  "scripts": {
    "client-install": "cd client && npm install",
    "start": "node dist/source/server.js",
    "server": "cd source && nodemon server.ts",
    "client": "cd client && npm start",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "postinstall": "tsc"
  },
  "repository": {
    "type": "git",
    "url": "git https://github.com/JonathanDPotter/inventory.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/JonathanDPotter/inventory/issues"
  },
  "homepage": "https://github.com/JonathanDPotter/inventory#readme",
  "dependencies": {
    "@types/dotenv": "^8.2.0",
    "@types/express": "^4.17.13",
    "@types/mongoose": "^5.11.97",
    "@types/react-router-dom": "^5.3.2",
    "concurrently": "^6.4.0",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "mongoose": "^6.0.14",
    "react-router-dom": "^6.2.1",
    "ts-node": "^10.4.0",
    "typescript": "^4.5.4"
  },
  "engines": {
    "node": "16.13.1",
    "npm": "7.12.1"
  }
}

Full build log is long, but a sample is here:

Try npm i --save-dev @types/react-dom if it exists or add a new declaration (.d.ts) file containing declare module 'react-dom'; client/src/index.tsx(3,26): error TS2307: Cannot find module 'react-redux' or its corresponding type declarations. client/src/index.tsx(6,17): error TS6142: Module './App' was resolved to '/tmp/build_db5fb0f4/client/src/App.tsx', but '--jsx' is not set. client/src/index.tsx(9,3): error TS17004: Cannot use JSX unless the '--jsx' flag is provided. client/src/index.tsx(10,5): error TS17004: Cannot use JSX unless the '--jsx' flag is provided. client/src/index.tsx(11,7): error TS17004: Cannot use JSX unless the '--jsx' flag is provided. client/src/store/index.ts(6,8): error TS2307: Cannot find module '@reduxjs/toolkit' or its corresponding type declarations.

Link to GitHub repo here.

CodePudding user response：

I fixed the issue by adding:

"exclude": ["client", "node_modules", "public"]

to the tsconfig.json after compilerOptions (not in compilerOptions).

The root of the problem was that the tsc command was trying to compile all of the React app in the client folder as well. Now it builds perfectly.