npm ERR! code EJSONPARSE npm install with husky and lint-staged

Question

My package.json works without husky and lint-staged but not with them. It's saying:

npm ERR! code EJSONPARSE
npm ERR! file C:\Proyectos\my-app\package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token ​ in JSON at position 1254 while parsing near '...
npm ERR! JSON.parse   "lint-staged": {​​​​​​​​
npm ERR! JSON.parse     "*.{​​...'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

What I added in package.json is...

"husky": { "hooks": { "pre-commit": "npm run test && prettier --write", "pre-push": "npm run test && prettier --write" } }, "lint-staged": {​​​​​​​​ "*.{​​​​​​​​ts,tsx}​​​​​​​​": [ "prettier --write", "git add" ] }​​​​​​​​

Some user ask me to upload the whole package.json, so here is the code...

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.19.3",
    "@types/react": "^16.9.55",
    "@types/react-dom": "^16.9.9",
    "@types/styled-components": "^5.1.4",
    "lint-staged": "^10.5.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "typescript": "^4.0.5",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }​​​​​​​​,
  "devDependencies": {
    "prettier": "2.1.2",
    "styled-components": "^5.2.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run test && prettier --write",
      "pre-push": "npm run test && prettier --write"
    }
  },
  "lint-staged": {​​​​​​​​
    "*.{​​​​​​​​ts,tsx}​​​​​​​​": [
      "prettier --write",
      "git add"
    ]
  }
}

Answer 1

Try this now,

{
    "name": "my-app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.11.5",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "@types/jest": "^26.0.15",
        "@types/node": "^12.19.3",
        "@types/react": "^16.9.55",
        "@types/react-dom": "^16.9.9",
        "@types/styled-components": "^5.1.4",
        "lint-staged": "^10.5.1",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-scripts": "4.0.0",
        "typescript": "^4.0.5",
        "web-vitals": "^0.2.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "prettier": "2.1.2",
        "styled-components": "^5.2.1"
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run test && prettier --write",
            "pre-push": "npm run test && prettier --write"
        }
    },
    "lint-staged": {
        "*.{ts,tsx}": [
            "prettier --write",
            "git add"
        ]
    }
}