react-scripts 构建“第 1 行解析错误”答案

【问题标题】：react-scripts build "Parse error on line 1"react-scripts 构建“第 1 行解析错误”
【发布时间】：2020-01-01 10:47:31
【问题描述】：

我已经使用“create-react-app”创建了一个 React 应用程序，它通过“npm start”运行良好但是，当我尝试构建或部署到 Heroku 时，我从 react-scripts build.js 中收到一个错误日志：

-----> Build
       Running build

       > areaos-react@0.1.0 build /tmp/build_b6b622a1f46daa3af2d16fdb6ffb259a
       > react-scripts build

       Creating an optimized production build...
       Failed to compile.

       Parse error on line 1: 
       0.3(-1)
       ---^
       Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "LPAREN"

我尝试过： -更新 npm 模块，包括 react-scripts -从 package.json 中删除“react-scripts build” - 在 package.json 中将“main”更改为“react-scripts start”

这是我的 package.json

{
  "name": "doggos-react",
  "version": "0.1.0",
  "engines": {
    "node": "8.9.3",
    "npm": "6.9.0"
  },
  "private": true,
  "dependencies": {
    "caniuse-lite": "^1.0.30000989",
    "chart.js": "^2.8.0",
    "chartjs-plugin-labels": "^1.1.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "gl-react": "^3.17.2",
    "glsl-fxaa": "^3.0.0",
    "glslify": "^7.0.0",
    "glslify-loader": "^2.0.0",
    "gsap": "^2.1.3",
    "jquery": "^3.4.1",
    "orbit-controls-es6": "^2.0.0",
    "pg": "^7.12.1",
    "postprocessing": "^6.6.0",
    "react": "^16.9.0",
    "react-addons": "^0.9.1-deprecated",
    "react-addons-update": "^15.6.2",
    "react-backdrop-filter": "^1.3.2",
    "react-bootstrap": "^0.32.4",
    "react-chartjs-2": "^2.7.6",
    "react-dom": "^16.9.0",
    "react-input-slider": "^4.0.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.1.1",
    "react-svg-loader": "^3.0.3",
    "react-swipe": "^6.0.4",
    "react-tabulator": "^0.9.1",
    "swipe-js": "^2.2.0",
    "swipe-js-iso": "^2.1.5",
    "three": "^0.107.0",
    "three-gif-loader": "^1.1.0",
    "three-obj-loader": "^1.1.3",
    "three-svg-loader": "^0.1.0"
  },
  "main": "react-scripts start",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "https://my_backend_app.com",
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

我不知道该怎么做。错误消息对我来说毫无意义。

第 1 行解析错误发生在哪个文件上？当“开始”脚本运行良好时，“react-scripts build”到底在做什么可能会出错？

我只需要这个应用程序在 heroku 上运行，无论它是构建还是通过 npm start 运行，它在本地运行得很好。我想修复这个错误，但如果有人也能指出我可以告诉 heroku 像我在本地做的那样做“npm start”的地方，那现在也可以。

【问题讨论】：

因为您的应用程序纯粹只是一个前端应用程序，所以部署到 Heroku 是多余的，并且可能比构建前端资产 (npm run build) 并将它们部署到 CDN 慢。看看这个surge.sh
但npm run build 不适合我。在本地或 heroku 上。

标签： node.js reactjs heroku create-react-app react-scripts

【解决方案1】：

我来到这里时遇到了类似的问题（yarn start 工作正常，但react-scripts build 在第 1 行给出了解析错误）。错误消息没有给我有用的信息或指向实际错误的位置。 @Joseph Ghaida 对 calc 错误的回答为我指明了正确的方向。就我而言，我没有遵循关于负数周围空白的 css 规则：
calc(var(--square-diameter)*-3) 导致解析错误
calc(var(--square-diameter)* -3) 很好
calc(var(--square-diameter)*(-3)) 很好

【讨论】：

这正是我试图通过 Docker 文件进行反应构建的问题。在需要分隔的除法 ...)/-2 之后，我有一个负数 ...)/ -2。
我有一个空格，但它也给我抛出了一个错误。对我来说，帮助将 -1 移到前面，例如： calc(-1 * var(--smthng))

【解决方案2】：

原来 Create React 应用程序附带的 postcss-calc 模块中有一个错误。我通过忽略该解析器解决了这个问题。我在我的 json 中设置了这个来删除解析器：

  "cssnano": {
    "preset": [
      "default",
      {
        "calc": false
      }
    ]
  },

报告了错误，我从here得到了我的解决方案

【讨论】：