SyntaxError: Unexpected token < in JSON at position 0

Question

Im trying to get a single object from the api,
it worked fine for other pages but for some reason it doesnt work
and i get a "SyntaxError: Unexpected token < in JSON at position 0"
i dont know what to do with it.

react/javascript fetch part:
const fetcher = () => {
console.log("test");
fetch(api/${id})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Unable to get items.', error));
}

asp net core api get with parameter:

        [HttpGet("{id}")]
        public async Task<ActionResult<Product>> GetSingleData(int id)
        {
            var find = await _context.products.FindAsync(id);

            if (find == null)
                return NotFound();


            return find;
        }

I keep getting the error:
"Unable to get items. SyntaxError: Unexpected token < in JSON at position 0"

Answer 1

I like to share the error but for some reason i keep getting a error on this website

Answer 2

Error:

Unable to get items. SyntaxError: Unexpected token < in JSON at position 0
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2560
(anonymous) @ Details.js:14
Promise.catch (async)
fetcher @ Details.js:14
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889

Answer 3

Answer 4

this error is typical when rather than return json, the webapi is returning the developer html error page.

in the browser, under network, just view the source to read the error, or in javascript when response.json() fails, use response.text().

Answer 5

{
    "manifest_version": 3,
    "name": "Pro-VPN",
    "version": "1.0",
    "description": "Fast, ultra secure, and easy to use VPN service to protect your privacy online. Enjoy Unlimited Traffic and Bandwidth!",
    "permissions": [
      "activeTab",
      "webRequest",
      "webRequestBlocking",
      "storage",
      "tabs",
      "hostPermissions",
      "notifications",
      "contentSettings",
      "management"
    ],
    "background": {
      "service_worker": "background.js"
    },
    "icons": {
      "48": "icon.png"
    },
    "action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
      }
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
      }
    ]
  }