如何将用 typescript 编写的 MERN 应用程序部署到 Heroku？答案

【问题标题】：How can I deploy a MERN app written in typescrtipt to Heroku?如何将用 typescript 编写的 MERN 应用程序部署到 Heroku？
【发布时间】：2021-12-30 14:46:18
【问题描述】：

我找不到说明如何做我想做的事情的教程，我尝试混合几个做类似事情的教程无济于事。我有一个用 typescript 编写的 express 服务器和一个用 typescript 编写的 react 应用程序，它们在本地完全按照它们应该运行的方式运行，但我无法将它们部署到 Heroku。运行 tsc post-install 时构建失败，错误是“找不到模块”和“没有 --jsx 标志无法使用 jsx”的混合。我不确定具体需要进行哪些更改才能实现。

没有安装依赖项作为开发依赖项。在本地运行 tsc 没有任何错误。

我的 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"
  }
}

完整的构建日志很长，但这里有一个示例：

尝试npm i --save-dev @types/react-dom（如果存在）或添加新的包含declare module 'react-dom'; 的声明 (.d.ts) 文件 client/src/index.tsx(3,26)：错误 TS2307：找不到模块“react-redux”或其相应的类型声明。 client/src/index.tsx(6,17): error TS6142: Module './App' was resolved to '/tmp/build_db5fb0f4/client/src/App.tsx', but '--jsx' is 没有设置。 client/src/index.tsx(9,3)：错误 TS17004：除非提供了“--jsx”标志，否则无法使用 JSX。 client/src/index.tsx(10,5)：错误 TS17004：除非提供了“--jsx”标志，否则无法使用 JSX。 client/src/index.tsx(11,7)：错误 TS17004：除非提供了“--jsx”标志，否则无法使用 JSX。 client/src/store/index.ts(6,8): error TS2307: 找不到模块 '@reduxjs/toolkit' 或其对应的类型声明。

链接到 GitHub 存储库 here。

【问题讨论】：

您是否尝试过运行：npm i --save-dev @types/react-dom 并再次尝试？
是的。实际上没有任何类型丢失（在本地完美运行），这只是在 tsc 在 heroku 中运行时发生，并且这些不是它无法找到的唯一类型声明。

标签： reactjs typescript express heroku mern

【解决方案1】：

我通过添加以下内容解决了这个问题：

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

到 compilerOptions 之后的 tsconfig.json（不在 compilerOptions 中）。

问题的根源在于 tsc 命令也试图编译客户端文件夹中的所有 React 应用程序。现在它完美地构建了。

【讨论】：