Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 (undefined:1)

[plainspace]

Getting Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 error when trying to run the app on Heroku using Google OAuth. I can run and auth locally. Updated OAuth 2.0 client IDs in Google API manager and added them to url and redirectUri in app/actions/oauth.js.

Configuration:

Platform: node Framework: express Template Engine: jade CSS Framework: bootstrap CSS Preprocessor: sass JavaScript Framework: react Build Tool: npm Unit Testing: mocha Database: postgresql Authentication: google,email Deployment: heroku

[TMcLoone]

I'm also having a similar problem on heroku, getting Uncaught SyntaxError: Unexpected token < on all pages. Trying to find where the problem is now. Presumably something to do with environment settings

• Platform: node
• Framework: express
• Template Engine: jade
• CSS Framework: none
• CSS Preprocessor: sass
• JavaScript Framework: react
• Build Tool: webpack
• Unit Testing: mocha
• Database: mysql
• Authentication: email,google,facebook,twitter
• Deployment: heroku

[sahat]

There are 2 ways to fix this.

1. Manually run npm run build and add bundle.js to git.
2. Add postinstall task to package.json which executs npm run build task.

[TMcLoone]

That did it for me, thanks Sahat!

[plainspace]

i've been doing #1 and pushing to Heroku resulting in this error.

[plainspace]

just checked my package.json. I also have postinstall task running.

[plainspace]

now i'm getting this error: 'POST https://production.herokuapp.com/auth/google 500 (Internal Server Error) bundle.js:509'

[plainspace]

thanks for making a quick fix for this! what do I have to update in my package.json since I already generated/downloaded?

[sahat]

@plainspace Just need to add postinstall task and move a few devDependencies into dependencies array https://github.com/sahat/megaboilerplate/commit/01e9583e3b0e96842f72f98c30b0fddc2cdd244f, because Heroku won't install any devDepenendencies.

[plainspace]

I had that postinstall task and the others don't apply afaict:

{
  "name": "ko",
  "version": "1.0.0",
  "description": "Ko app",
  "scripts": {
    "build": "npm-run-all build:*",
    "build:css": "node-sass public/css/main.scss > public/css/main.css",
    "build:js": "browserify app/main.js -t [ babelify --presets [es2015 react] ] -o public/js/bundle.js",
    "deploy": "npm test && git push heroku master",
    "postinstall": "npm run build",
    "start": "node server.js",
    "test": "npm run test:client && npm run test:server",
    "test:client": "mocha test/client --recursive --compilers js:babel-register",
    "test:server": "mocha test/server --recursive --compilers js:babel-register",
    "watch": "npm-run-all --parallel watch:*",
    "watch:css": "nodemon -e scss -w public/css -x npm run build:css",
    "watch:js": "watchify app/main.js -t [ babelify --presets [es2015 react] ] -v -o public/js/bundle.js"
  },
  "dependencies": {
    "async": "^1.5.2",
    "babel-core": "^6.7.2",
    "babel-polyfill": "^6.7.2",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "bcrypt-nodejs": "^0.0.3",
    "body-parser": "^1.15.1",
    "bookshelf": "^0.9.2",
    "browserify": "^13.0.0",
    "compression": "^1.6.2",
    "cookie-parser": "^1.4.1",
    "dotenv": "^2.0.0",
    "express": "^4.13.4",
    "express-validator": "^2.20.4",
    "jade": "^1.11.0",
    "jsonwebtoken": "^5.7.0",
    "knex": "^0.10.0",
    "moment": "^2.12.0",
    "morgan": "^1.7.0",
    "node-sass": "^3.6.0",
    "nodemailer": "^2.3.0",
    "nodemon": "^1.9.1",
    "npm-run-all": "^1.8.0",
    "pg": "^4.5.1",
    "react": "15.1.0",
    "react-cookie": "^0.4.5",
    "react-dom": "15.1.0",
    "react-redux": "4.4.1",
    "react-router": "^2.4.0",
    "redux": "^3.3.1",
    "redux-thunk": "^2.0.1",
    "request": "^2.69.0",
    "watchify": "^3.7.0",
    "whatwg-fetch": "^0.11.0"
  },
  "devDependencies": {
    "babel-plugin-rewire": "^1.0.0-rc-3",
    "babel-register": "^6.8.0",
    "chai": "^3.5.0",
    "enzyme": "^2.3.0",
    "fetch-mock": "3.0.2",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^15.0.2",
    "redux-mock-store": "^1.0.2",
    "sinon": "^1.17.3",
    "sinon-chai": "^2.8.0",
    "supertest": "^1.2.0"
  },
  "engines": {
    "node": "6.1.0"
  }
}

[plainspace]

Are any of the above installed as dependencies of things in https://github.com/sahat/megaboilerplate/commit/01e9583e3b0e96842f72f98c30b0fddc2cdd244f? Just trying to understand what I need to change.

[plainspace]

I just generated a new (identical) project from the site and my package.json is the same.

[sahat]

@plainspace That looks ok to me. You don't need the rest of the packages since they only apply to Webpack. Is your configuration above still failing to build on Heroku?

Edit: Just verified it works fine if I install using npm install --production, then NODE_ENV=production npm run build, NODE_ENV=production npm start.

[chanunc]

I also had the same problem when deploy to Heroku last week, but when I generate new boilerplate today, the problem has gone. Thanks.

[plainspace]

@sahat the project is building fine... i'm still getting the 500 error on auth related to https://github.com/sahat/megaboilerplate/issues/151.

wrt your comment above about using npm install --production, then NODE_ENV=production npm run build, NODE_ENV=production npm start are you referring to building locally and pushing to Heroku?

[sahat]

That was just me trying to simulate production environment, in order to make sure all dependencies are correctly installed and the app can run successfully. Because as mentioned above, some Webpack packages were part of devDependencies which were not getting installed in a production environment.

[ndotie]

That means, On your Promise response your requesting a json response with .then( resp => resp.json()) something like that but on your server you're not sending json data back