將 Nodejs 部署到 Heroku：babel 出錯（es6）

Question

部署應用程序時，我從 heroku 控制台收到此錯誤。 它在本地工作但無法部署。

SyntaxError: /tmp/build_4b397c70/.heroku/node/lib/node_modules/npm/docs/gatsby-browser.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:10):
  5 |
  6 | export const wrapPageElement = ({ element, props }) => {
> 7 |   return <Layout {...props} >{element}</Layout>
    |          ^
  8 | }
  9 |
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
    at Parser._raise (/tmp/build_4b397c70/node_modules/@babel/parser/lib/index.js:810:17)
    at Parser.raiseWithData (/tmp/build_4b397c70/node_modules/@babel/parser/lib/index.js:803:17)
    at Parser.expectOnePlugin (/tmp/build_4b397c70/node_modules/@babel/parser/lib/index.js:9982:18)
    at Parser.parseExprAtom (/tmp/build_4b397c70/node_modules/@babel/parser/lib/index.js:11367:22)
    at Parser.parseExprSubscripts (/tmp/build_4b397c70/node_modules/@babel/parser/lib/index.js:10941:23)
    at Parser.parseUpdate (/tmp/build_4b397c70/node_modules/@babel/parser/lib/index.js:10921:21)
    at Parser.parseMaybeUnary (/tmp/build_4b397c70/node_modules/@babel/parser/lib/index.js:10899:23)
    at Parser.parseExprOps (/tmp/build_4b397c70/node_modules/@babel/parser/lib/index.js:10756:23)
    at Parser.parseMaybeConditional (/tmp/build_4b397c70/node_modules/@babel/parser/lib/index.js:10730:23)
    at Parser.parseMaybeAssign (/tmp/build_4b397c70/node_modules/@babel/parser/lib/index.js:10693:21) {
  loc: Position { line: 7, column: 9 },
  pos: 209,
  missingPlugin: [ 'jsx', 'flow', 'typescript' ],
  code: 'BABEL_PARSE_ERROR'
}

package.json

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "xxx",
  "main": "index.js",
  "engines": {
    "node": "14.x"
  },
  "scripts": {
    "start": "npm run build && node ./dist/index.js",
    "dev": "nodemon --exec babel-node ./index.js",
    "build": "npm run clean && npm run build-babel",
    "clean": "rm -rf dist && mkdir dist",
    "build-babel": "babel . --out-dir dist --ignore node_modules"
  },
  "author": "tiavina-mika",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.14.3",
    "@babel/core": "^7.14.3",
    "@babel/preset-react": "^7.13.13",
    "bcrypt": "^5.0.1",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^9.0.2",
    "express": "^4.17.1",
    "express-mongo-sanitize": "^2.1.0",
    "express-validation": "^3.0.8",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.12.10"
  },
  "devDependencies": {
    "@babel/node": "^7.14.2",
    "@babel/plugin-transform-runtime": "^7.14.3",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.14.2",
    "@babel/runtime": "^7.14.0",
    "nodemon": "^2.0.7"
  }
}

.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": [
      ["@babel/transform-runtime"]
  ]
}

我將@babel/preset-react 添加到 babel 配置的“預設”部分，但仍然出現相同的錯誤

注意：它是一個簡單的 nodejs 服務器 api 不是一個反應，但錯誤提示使用預設反應。

Answer 1

生成build目錄時，我遇到了與 Heroku 相同的問題。 您將目錄輸入更改為其他（例如src ）。

我與您分享我的構建器並啟動腳本：

  "prebuild": "rm -rf ./dist",
  "build": "babel ./src -d ./dist --ignore node_modules,test",
  "prestart": "npm run build",
  "start": "pm2-runtime start ./dist/index.js"