React app Heroku build failed - git push heroku master - Expecting X, Parse error on line 1: got unexpected end of input. Line 1 of which file?

Question

I'm getting a very confusing parsing error when I run git push heroku master when trying to build a React app in Heroku that successfully built yesterday. The only changes since then have been some media queries another contributor added to several .scss files.

The main error (full build report listed below) reads, remote: Failed to compile. remote: remote: Parse error on line 1: remote: ^ remote: Expecting "CALC", "LPAREN", "SUB", "NUMBER", "FUNCTION", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "expression", "math_expression", "value", "function", "css_value", got unexpected end of input remote: remote: remote: npm ERR! code ELIFECYCLE remote: npm ERR! errno 1 remote: npm ERR! [email protected] build:react-scripts buildremote: npm ERR! Exit status 1

The most confusing part of this is that I can't figure out which file this error is referring to when it says Parse error on line 1. Based on reading this stack overflow question (git push heroku master fails with parse error - which file?) I assumed the error was referring to my package.json file. However, I can't find anything wrong with it. Any help on this would be greatly appreciated.

package.json

{
  "name": "world-of-flags",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "dotenv": "^6.2.0",
    "enzyme": "^3.8.0",
    "node-sass": "^4.11.0",
    "prop-types": "^15.6.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^2.1.3",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.7",
    "redux-thunk": "^2.3.0"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!src/index.js",
      "!src/serviceWorker.js",
      "!src/setupTests.js",
      "!src/history.js",
      "!src/reducers/index.js",
      "!src/mockData/mockData.js",
      "!src/utilities/allCountries.js",
      "!src/utilities/allCountriesImagesObject.js",
      "!src/utilities/allCountriesObjects.js"
    ]
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "eslint": "./node_modules/eslint/bin/eslint.js ./src/*.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "enzyme-adapter-react-16": "^1.7.1",
    "jshint": "^2.9.7",
    "prettier": "1.15.3",
    "resolve-url-loader": "^3.0.0"
  },
  "prettier": {
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true
  }
}

Full Heroku build log

-----> React.js (create-react-app) multi app detected
-----> Configure create-react-app build environment
       Using `NODE_ENV=development`
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=false
       NODE_ENV=development
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 10.x...
       Downloading and installing node 10.15.0...
       Using default npm version: 6.4.1
       
-----> Restoring cache
       - node_modules
       
-----> Building dependencies
       Installing node modules (package.json + package-lock)
       added 212 packages from 12 contributors, removed 4 packages, updated 98 packages and audited 36629 packages in 28.481s
       found 0 vulnerabilities
       
       
-----> Caching build
       - node_modules
       
-----> Pruning devDependencies
       Skipping because NODE_ENV is not 'production'
       
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
=====> Detected Framework: React.js (create-react-app)
       Writing `static.json` to support create-react-app
       Enabling runtime environment variables
> [email protected] build /tmp/build_768ef9fd4678f7cb022271fe96647f94
> react-scripts build
Creating an optimized production build...
Failed to compile.
Parse error on line 1: 
^
Expecting "CALC", "LPAREN", "SUB", "NUMBER", "FUNCTION", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "expression", "math_expression", "value", "function", "css_value", got unexpected end of input
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /app/.npm/_logs/2019-01-19T21_04_11_353Z-debug.log
 !     Push rejected, failed to compile React.js (create-react-app) multi app.
 !     Push failed

El Waiting · Accepted Answer · 2019-01-20 19:46:29Z

After working all day, I was finally able to solve the problem and to deploy the app to Heroku. I’ll summarize by saying that a big part of it was the way certain node modules were installed in the package.json and on my computer, namely node-sass, sass-loader, and webpack.

The problems I had to work through:

The heroku build initially failed due to the strange Parse error on line 1 and unexpected end of input errors. This turned out to be because heroku wasn’t recognizing the SASS media queries that I had recently added to the app. When I commented the media queries out, the heroku build/deployment worked, at least according to the heroku build log it did.
Next, though the build 'worked,' when I actually visited the deployment link, I got console errors saying that I had to install node-sass. This was very annoying because I had node-sass in my package.json under devDependencies, which I thought was sufficient, but apparently you want it to be listed under dependencies. I kept trying to install node-sass but the deployed site simply wouldn’t recognize it.

I tried to get around this by installing webpack which created more problems because since I had previously installed webpack globally, heroku was confused because I had 2 different versions installed. I got error messages in my heroku build that said something This project requires webpack version 4.19 but a later version 4.28 was found higher up (not the exact words but I can't find the exact error message anymore).

The solutions:

Uninstall node-sass, sass-loader, and webpack both in the project root folder and in my main, user folder on my computer.
Globally uninstall webpack of the specific version(s) that I had globally installed previously.
Verify, using webpack --version that no versions of webpack exist in the project folder or the main computer root folder.
Delete the node_modules and package-lock.json both in the project root folder and in my main user folder.
Reinstall node-sass and sass-loader. Previously these showed up in the package.json under the devDependencies, and upon completing all the above steps they then showed up under dependencies, which was what I wanted.
Run npm install. After this the heroku build/deployment worked and I was able to view the content on the deployment link.

I hope this helps. Good luck!

Great explanation. Starring it for future reference. I wish I'd been closer to the real cause.
Thanks @stever! I appreciate that. And thanks for your suggestions.

stever · Accepted Answer · 2019-01-19 22:12:00Z

1

Heroku wants to build it's own.

There are buildpacks that you can install. If this is a CRA app...

From the command line: heroku create --buildpack https://github.com/mars/create-react-app-buildpack.git

edited Jan 19, 2019 at 22:12

answered Jan 19, 2019 at 21:51

stever

1,2513 gold badges14 silver badges22 bronze badges

5 Comments

El Waiting Over a year ago

Thanks so much for your reply. I tried your suggestion with npm and got a different build error message:

remote: sh: 1: cd: can't cd to client remote: npm ERR! code ELIFECYCLE remote: npm ERR! errno 2 remote: npm ERR! [email protected] heroku-postbuild: cd client && npm install && npm run build remote: npm ERR! Exit status 2

Should I be substituting the actually filepath for the app's root folder in place of client in the "heroku-postbuild" script?

El Waiting Over a year ago

I ran the command to install the buildpack, but I'm still getting the same error when I try to deploy to heroku. The buildpack installation appears to have created a new application in heroku. Here is what happened when I installed it:

username :: world-of-flags  - (master) $ heroku create --buildpack https://github.com/mars/create-react-app-buildpack.git Creating app... done, ⬢ boiling-coast-42085 Setting buildpack to https://github.com/mars/create-react-app-buildpack.git... done https://boiling-coast-42085.herokuapp.com/ | https://git.heroku.com/boiling-coast-42085.git

El Waiting Over a year ago

I ran through the troublshooting section of the buildpack guide on heroku that you posted the link to but am still getting the same error message. I also tried to run npm run build and got the same mysterious Parse error on line 1, though I still don't know which file it's referring to. Thanks for all your help on this.

stever Over a year ago

Is this a freestanding React App or is it wrapped into a Node app? I ask because if you're deploying the container as a Node app, try going to your project in the Heroku dashboard > settings and scroll down to "Buildpacks". If heroku/nodejs isn't installed, it should be. ALSO if this is in a Node project, make sure you don't use a script with nodemon. Must be node!

El Waiting Over a year ago

Thank you, Stever, I believe it's a freestanding React App but it references a separate Node app for the backend. I ended up finally solving the problem and will write out a longer post about what worked. Thanks so much for your help.

Collectives™ on Stack Overflow

React app Heroku build failed - git push heroku master - Expecting X, Parse error on line 1: got unexpected end of input. Line 1 of which file?

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related