Parsing in JS gets me a SyntaxError: JSON.parse: unexpected character

Question

An error pop out when I try to parse a JSON object (or at least I guess it should be an object since there's "content-type": "application/json in the response's header). Here is the full error stack I get :

Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
    handleUpdate index.jsx:55
    UserUpdateForm index.jsx:77
    React 5
    unstable_runWithPriority scheduler.development.js:468
    React 3
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157
    js scheduler.development.js:180
    js scheduler.development.js:644
    __require chunk-HV27UI33.js:9
    js index.js:6
    __require chunk-HV27UI33.js:9
    React 2
    __require chunk-HV27UI33.js:9
    js React
    __require chunk-HV27UI33.js:9
    <anonymous> react-dom:1
index.jsx:55:24

from this code :

    const handleUpdate = async ({ username, email }) => {
        const token = Cookies.get("token");
        const body = { user: { username: username, email: email } };
        const res = await update(`/users/${currentUser.id}`, body, token);
        const response = JSON.parse(res);
        console.log(response);
        if (response.status === 200) {
            handleChange(response);
        }
    };

where update() is :

import axios from 'axios';
import { BASE_URL } from "./config.js";

const update = async (
  endpoint,
  body = null,
  jwt_token = null,
  header = { "Content-Type": "application/json" }) => {

  let opt = header;
  if (jwt_token){
      opt["Authorization"] = jwt_token
  }

  try {
    return await axios.patch(BASE_URL + endpoint, body, { headers: opt })
  } catch (err) {
    console.error(`An error occurred while trying to fetch ${endpoint}. ${err}`);
  }
}

export default update;

I already found answers to similar issues, talking about a problem of data not encoded in UTF-8, but I don't think it is my case. The really weird thing is that I don't have such issues with other components using similar request (I built post requests that are really similar and do not produce any issue in the components they are used in). And if I don't parse the response I get from the server, response.data.attributes would be undefined , even though there are keys data and attributes .

Edit : here is the header of the response. As we can see, there is a parameter content-type: application/json :

HTTP/2 200 OK
server: nginx
date: Tue, 20 Jul 2021 09:02:11 GMT
content-type: application/json; charset=utf-8
x-sso-wat: You've just been SSOed
access-control-allow-origin: *
access-control-allow-methods: GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD
access-control-expose-headers: 
access-control-max-age: 7200
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
x-content-type-options: nosniff
x-download-options: noopen
x-permitted-cross-domain-policies: none
referrer-policy: strict-origin-when-cross-origin
etag: W/"***
cache-control: max-age=0, private, must-revalidate
x-request-id: ***
x-runtime: 0.053418
vary: Origin
content-security-policy: upgrade-insecure-requests
content-security-policy-report-only: default-src https: data: 'unsafe-inline' 'unsafe-eval'
permissions-policy: interest-cohort=()
strict-transport-security: max-age=63072000; includeSubDomains; preload
X-Firefox-Spdy: h2

Edit 2: as suggested in another Stackoverflow thread, I tried to parse a stringified response. It felt like pranking JS, but ok, it avoided the "JSON.parse: unexpected character" issue. Meaning : the initial response is a JSON object, BUT I still cannot access response.data.attributes ... This is wizardry.

Answer 1

axios parses the response automatically, so it is already an object. The error is coming from trying to parse something that is not a string, but an object.

• Sounds like you figured it out, so just posting here for future users to find it quickly.