反应脚本构建“第 1 行解析错误”

Question

我已经使用“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 行解析错误发生在哪个文件上？当“start”脚本工作正常时，“react-scripts build”到底在做什么，可能会出错？

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

Answer 1

事实证明，Create React 应用程序附带的 postcss-calc 模块存在错误。我通过忽略该解析器解决了该问题。我在 json 中设置它来删除解析器：

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

报告了错误，我从这里得到了解决方案

Answer 2

我来到这里遇到了类似的问题（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))很好