Unexpected Token F in Json at Position 192 Try Again...choose File
Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0
Yous made an HTTP asking, probably with Fetch, and information technology blew up with this error. Or a very similar one.
Ugh.
Here's what causes it and how to fix information technology.
Read on for a quick suggestion, and watch the video for a walkthrough of a few techniques you can endeavour to debug this in your own app.
The Crusade
This happens when you make a request to the server and parse the response as JSON, merely it'southward not JSON. The lawmaking responsible might await something similar this:
fetch ( '/users' ) . then ( res => res . json ()) The actual request worked fine. Information technology got a response. Merely the res.json() is what failed.
JSON.parse
You might instead exist parsing the JSON yourself with JSON.parse like this:
JSON . parse ( theStringThatIsNotJson ) ; JSON.parse is what fetch'south res.json() is doing nether the hood, then the error will be the aforementioned either mode.
Valid JSON
JSON should start with a valid JSON value – an object, array, cord, number, or false/truthful/null. This response started with a < (hence the "Unexpected token <").
That unexpected token, <, is a strong inkling that the response was HTML instead of JSON.
The root cause is that the server returned HTML or some other non-JSON cord. Why would it do that?
"Unexpected token o in JSON at position 1" and other varieties
The verbal text of this error will differ depending on what the server returned. The token and the position may vary, merely the root cause is the same: the text that your app is trying to parse as JSON is non really valid JSON.
Here are some other variations I've seen…
- Unexpected token < in JSON at position 1
- Unexpected token p in JSON at position 0
- Unexpected token d in JSON at position 0
Watch the video above for how this mistake works, and how to utilize your browser's developer tools to figure out exactly what'due south causing it. (or keep on readin')
The Fix
The first thing to do is try logging information technology out. With fetch, you can use res.text() instead of res.json() to become the text cord itself. Alter your code to read something like this, and cheque the console to run into what'south causing the problem:
fetch ( '/users' ) // .then(res => res.json()) // comment this out for now . then ( res => res . text ()) // convert to evidently text . and then ( text => console . log ( text )) // so log it out Note that these res.json() and res.text() functions are asynchronous, so you cannot log their render value directly. That's why the console.log must be in a split .then block.
Set JSON.parse Unexpected Token
If you're using JSON.parse straight, that's a plain onetime synchronous call and you can replace the phone call with a console.log to see what'south going on.
// JSON.parse(someString) // annotate this out temporarily console . log ( someString ) // log out out, and see what'southward wrong Arraign the Server?
The server might return HTML instead of JSON for a bunch of reasons:
- The URL doesn't be and the server returned an 404 page as HTML. Y'all might have a typo in the client lawmaking (
/usersinstead of/user) or in the server code that sets upwards the route. - The server might need a restart if yous just added a URL to it. If you're using an Limited server for instance, and you just added a new
app.go('/users', ...)route, but didn't restart the server, then information technology doesn't know about the new route yet. - The customer'due south proxy isn't fix upwards: if you're using a Webpack dev server similar Create React App, you tin prepare a proxy to forwards requests to a backend server.
- The API root URL is
/: If you're using a proxy through Webpack or Create React App, brand sure your API route is non at the root level/. That'll confuse the proxy and yous'll get dorsum HTML instead of your API request. Instead, prefix the route with something like/api/.
Also, check the browser devtools Network tab and expect for the request that caused this error, and then look at the response that came back.
Is information technology a 404 page? (might be a missing route or a typo)
Is information technology the alphabetize.html page? (might be a missing road or a misconfigured proxy)
If everything looks fine, and then restart your backend server and your frontend dev server, and see if the problem goes abroad.
Problem Solved?
Hopefully you lot've now gotten rid of the fault. If not, leave a comment beneath with what you tried.
Success! At present check your e-mail.
Success! At present check your email.
Learning React can exist a struggle — and so many libraries and tools!
My advice? Ignore all of them :)
For a stride-by-stride approach, check out my Pure React workshop.
Acquire to recall in React
- 90+ screencast lessons
- Full transcripts and airtight captions
- All the code from the lessons
- Developer interviews
Start learning Pure React now
Dave Ceddia'southward Pure React is a work of enormous clarity and depth. Hats off. I'm a React trainer in London and would thoroughly recommend this to all forepart finish devs wanting to upskill or consolidate.
Alan Lavender
@lavenderlens
Source: https://daveceddia.com/unexpected-token-in-json-at-position-0/
Post a Comment for "Unexpected Token F in Json at Position 192 Try Again...choose File"