5

I have created a React App with "create-react-app" and it runs fine via "npm start" however, when I try to build or deploy to Heroku I get an error from the react-scripts build.js with the log:

-----> 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"

I have tried: -updating npm modules including react-scripts -removing "react-scripts build" from package.json -changing "main" to "react-scripts start" in package.json

here is my 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"
  ]
}

I'm out of ideas on what to do. the error message means nothing to me.

Which file is line 1 parse error happening on? What is "react-scripts build" doing exactly that could possibly be going wrong when the "start" script works just fine?

I just need this app to run on heroku no matter if it is a build or just running through npm start which DOES run just fine locally. I would like to fix this error but if anyone can also point me to where I can just tell heroku to do "npm start" as I do locally that would work for now too.

Joseph Ghaida
  • 129
  • 1
  • 12
  • Because your application is purely just a frontend application, deploying to Heroku is an overkill, and possibly slower than building the frontend assets (`npm run build`) and deploy these to a CDN. Check this out https://surge.sh/ – Stanley Nguyen Aug 28 '19 at 09:34
  • but ```npm run build``` isn’t working for me. either locally or on heroku. – Joseph Ghaida Aug 28 '19 at 16:29

3 Answers3

5

Turns out there was a bug in postcss-calc module that comes with Create React app. I resolved the issue by ignoring that parser. I set this in my json to remove the parser:

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

bug is reported and I got my solution from here

Joseph Ghaida
  • 129
  • 1
  • 12
5

I came here with a similar issue (yarn start worked fine, but react-scripts build gave a parse error on line 1). The error message didn't give me helpful info or point me to the location of the actual error. @Joseph Ghaida's answer about a calc bug pointed me in the right direction. In my case, I had not followed the css rules regarding white space around negative numbers:
calc(var(--square-diameter)*-3) causes the parse error
calc(var(--square-diameter)* -3) is fine
calc(var(--square-diameter)*(-3)) is fine

skedwards88
  • 309
  • 3
  • 7
  • This was EXACTLY my issue trying to do a react build through a Docker file. I had a negative number right after a division `...)/-2` that needed to be spaced out `...)/ -2`. – ScottS Jan 14 '21 at 23:32
  • I had it with a space, but it also threw an error for me. For me helped moving -1 in front, like: calc(-1 * var(--smthng)) – Maciej Wira Jan 20 '22 at 14:52
0

I had a similar issue and came here looking for a solution, but ignoring the parser's error is not a good solution for us.

We were trying to multiply by a negative number, like this:

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

Where screenHeightPercentage was -150.

Ended up making it work by absoluting the screenHeightPercentage and multiplying by -1, like this:

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

I wanted a clean function to calculate this instead of pasting this everywhere we needed it, so I ended up with this:

@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)));
        }
    }
}
Ashley Williams
  • 31
  • 4