Question

我用“ create-react-app”创建了一个React App，它通过“ 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模块 -从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”到底在做什么呢？

无论是构建版本还是仅通过npm start运行，我都只需要在Heroku上运行该应用即可在本地正常运行。我想解决此错误，但如果有人也可以指出我可以告诉heroku像在本地一样做“ npm start”的地方，那现在也可以。

Answer 1

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

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

报告了

bug，我从here获得了解决方案

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))很好

Answer 3

如果您对后端功能没有任何使用，只需使用netlify。

在此处部署简单的前端应用程序要容易得多。

检查Netlify

react-scripts建立“第1行解析错误”

3 个答案: