Unexpected string in JSON at position 608 while parsing

Question

I'm trying to host my react website to GitHub, but when I try to use:

npm install --save gh-pages

I get the following error:

Failed to parse json
npm ERR! JSON.parse Unexpected string in JSON at position 608 while parsing '{
npm ERR! JSON.parse   "name": "myportfoliosite",
npm ERR! JSON.parse   "versio'

The repository is at: https://github.com/InquisitiveDev2016/React-Developer-Portfolio2

Here is the package.json file:

{
  "name": "myportfoliosite",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://github.com/InquisitiveDev2016/React-Developer-Portfolio2",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-mdl": "^1.11.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I am trying to follow the instructions under the GitHub pages folder at: https://facebook.github.io/create-react-app/docs/deployment

But I am stuck, can someone please check what's wrong with the file?

Solution 1

This package.json was not a valid JSON you can try to fix the JSON structure, using online tools like and validate the JSON

https://jsoneditoronline.org/

https://jsonformatter.org/

below JSON should work for you:

    {
      "name": "myportfoliosite",
      "version": "0.1.0",
      "private": true,
      "homepage": "https://github.com/InquisitiveDev2016/React-Developer-Portfolio2",
      "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-mdl": "^1.11.0",
        "react-router-dom": "^5.0.1",
        "react-scripts": "3.0.1"
      },
      "scripts": {
        "predeploy": "npm run build",
        "deploy": "gh-pages -d build",
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
}
}

Solution 2

Another reason can be your package-lock.json file. Sometimes it gets corrupted, so you have to delete that file and run the npm install again.

Solution 3

I faced similar issue and my json was valid and structured. This issue was due to invalid package-lock.json file. Delete your package-lock.json file and run npm install. It will re-generate your package-lock.json file and works fine. Hope it may help someone

Solution 4

Your package.json file is malformed, I ran into the same issues locally. I fixed them like so, please note the <- comments indicating what I changed.

{
  "name": "myportfoliosite",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://github.com/InquisitiveDev2016/React-Developer-Portfolio2",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-mdl": "^1.11.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject" <- Removed an extra comma here
  },
  "eslintConfig": {
    "extends": "react-app"
  } <- Removed an extra comma here
} <- You missed a final closing curly bracket here

With the changes I had no problem installing gh-pages. Hope that helps!

View more solutions

Comments

[Dave Newton]

It tells you where the error is, and what the error is.

[DreamVision2017]

I implemented your changes and got the following error: Unexpected string in JSON at position 613 while parsing '{ npm ERR! JSON.parse "name": "myportfoliosite", npm ERR! JSON.parse "versio'