反應腳本構建“第 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 模塊，包括反應腳本 -從 package.json 中刪除“反應腳本構建” -將 package.json 中的“主要”更改為“反應腳本啟動”

這是我的 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 開始運行，它在本地運行得很好。 我想修復此錯誤，但如果有人還可以指出我可以告訴 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))很好

Answer 3

我有一個類似的問題，來到這里尋找解決方案，但忽略解析器的錯誤對我們來說不是一個好的解決方案。

我們試圖乘以一個負數，如下所示：

calc(var(--vh, 1vh) * $screenHeightPercentage);

其中 screenHeightPercentage 為 -150。

最后通過絕對化 screenHeightPercentage 並乘以 -1 使其工作，如下所示：

calc(-1 * calc(var(--vh, 1vh) * abs($screenHeightPercentage)));

我想要一個干凈的 function 來計算這個而不是將它粘貼到我們需要它的任何地方，所以我最終得到了這個：

@function vhCalc($screenHeightPercentage) {
    @if($screenHeightPercentage == 0) {
        @return 0;
    } @else {
        @if ($screenHeightPercentage > 0) {
            @return calc(var(--vh, 1vh) * abs($screenHeightPercentage));
        } @else {
            @return calc(-1 * calc(var(--vh, 1vh) * abs($screenHeightPercentage)));
        }
    }
}

Answer 4

如果您對后端功能沒有任何用處，只需使用 netlify。

在那里部署一個簡單的前端應用程序要容易得多。

檢查Netlify