我对打字脚本相当陌生，对处理生产环境中的部署更是陌生。我有一个基于这个回购的项目:https://github.com/suren-atoyan/react-pwa?ref=reactjsexample.com。这使我能够专注于我的概念验证，而不是自己构建整个前端。
我的项目在本地的开发环境中运行良好。问题是，当在heroku上部署时，我得到了由一些多组件触发的打字错误。以下是日志:
-----> Building on the Heroku-22 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 16.x
engines.npm (package.json): 8.x
Resolving node version 16.x...
Downloading and installing node 16.19.0...
Bootstrapping npm 8.x (replacing 8.19.3)...
npm 8.19.3 installed
-----> Installing dependencies
Installing node modules
> iifym@2.0.2 prepare
> husky install
fatal: not a git repository (or any parent up to mount point /)
Stopping at filesystem boundary (GIT_DISCOVERY_ACROSS_FILESYSTEM not set).
added 720 packages, and audited 721 packages in 25s
118 packages are looking for funding
run `npm fund` for details
2 vulnerabilities (1 moderate, 1 critical)
To address all issues, run:
npm audit fix
Run `npm audit` for details.
-----> Build
Running build
> iifym@2.0.2 build
> tsc && vite build
node_modules/@mui/material/Popper/Popper.d.ts(36,73): error TS2344: Type '"key" | "id" | "open" | "color" | "transition" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | ... 256 more ... | "componentsProps"' does not satisfy the constraint '"key" | "id" | "open" | "color" | "transition" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | ... 254 more ... | "componentsProps"'.
Type '"nonce"' is not assignable to type '"key" | "id" | "open" | "color" | "transition" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | ... 254 more ... | "componentsProps"'.
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed为了绕过这个，我尝试编辑我的tsconfig。Json中使用"strict":false条目来避免打字检查，但无济于事
这是我的包裹。我还尝试按照heroku文档的建议指定节点和npm引擎的版本:{
"name": "iifym",
"version": "2.0.2",
"description": "Starter kit for modern web applications",
"homepage": "https://react-pwa.surenatoyan.com/",
"repository": {
"type": "git",
"url": "git+https://github.com/suren-atoyan/react-pwa.git"
},
"engines": {
"node": "16.x",
"npm": "8.x"
},
"bugs": {
"url": "https://github.com/suren-atoyan/react-pwa/issues",
"email": "contact@surenatoyan.com"
},
"license": "MIT",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"https-preview": "serve dist",
"prepare": "husky install"
},
"dependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.10.6",
"@mui/lab": "5.0.0-alpha.100",
"@mui/material": "^5.10.6",
"@mui/system": "^5.10.6",
"@mui/utils": "^5.10.6",
"antd": "^4.23.6",
"is-mobile": "^3.1.1",
"notistack": "^2.0.5",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-error-boundary": "^3.1.4",
"react-helmet-async": "^1.3.0",
"react-hotkeys-hook": "^3.4.6",
"react-router-dom": "^6.3.0",
"recoil": "^0.7.2"
},
"devDependencies": {
"@trivago/prettier-plugin-sort-imports": "^3.2.0",
"@types/node": "^17.0.45",
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.5",
"@typescript-eslint/eslint-plugin": "^5.26.0",
"@typescript-eslint/parser": "^5.26.0",
"@vitejs/plugin-react": "^1.3.2",
"eslint": "^8.16.0",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0",
"https-localhost": "^4.7.1",
"husky": "^8.0.1",
"lint-staged": "^12.4.2",
"prettier": "2.6.2",
"typescript": "^4.7.2",
"vite": "^2.9.9",
"vite-plugin-pwa": "^0.12.0"
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write"
],
"src/**/*.{js,jsx,ts,tsx,json}": [
"eslint --max-warnings=0"
]
},
"author": "Suren Atoyan <contact@surenatoyan.com> (http://surenatoyan.com/)",
"keywords": [
"react",
"pwa",
"starter-kit",
"vite"
],
"main": "index.js"
}理想情况下，我的目标是解决错误并有一个干净的部署。老实说，如果我能绕过部署时的typescript检查(同时把它们保留在我的开发环境中)，我就能生存下来，而且仍然很开心。
你知道如何实现这两个解决方案吗?
谢谢你的帮助!
我也有同样的问题，并在mui: https://github.com/mui/material-ui/issues/35287中发现了这个开放问题，我最终将版本固定到5.10.15以使构建通过:
"@mui/material": "5.10.15",