react-scripts build "Parse error on line 1"

Question

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

       > [email protected] 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.

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 surge.sh — Stanley Nguyen
– Stanley Nguyen, Commented Aug 28, 2019 at 9:34
but npm run build isn’t working for me. either locally or on heroku. — Joseph Ghaida
– Joseph Ghaida, Commented Aug 28, 2019 at 16:29

Joseph Ghaida · Accepted Answer · 2019-08-29 00:59:00Z

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

answered Aug 29, 2019 at 0:59

Joseph Ghaida

1291 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

skedwards88 · Accepted Answer · 2020-09-17 17:56:30Z

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

answered Sep 17, 2020 at 17:56

skedwards88

4196 silver badges9 bronze badges

2 Comments

ScottS Over a year ago

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.

Maciej Wira Over a year ago

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

Ashley Williams · Accepted Answer · 2023-01-20 07:40:54Z

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)));
        }
    }
}

Collectives™ on Stack Overflow

react-scripts build "Parse error on line 1"

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related