VM892:1 Uncaught SyntaxError: Unexpected token e in JSON at position 0

Question

I'm presently working on a phx / phoenix API written in Elixir. And I have created a frontend for the API using React.js. However, I'm getting the below error message in the JS console of the browser.

I have successfully created a user using Postman, so I'm 99% sure the error isn't with the phx project, but rather somewhere with the React project.

I have both the frontend and backend hosted on github. And a .env file will need to be created in the root of the React project with the below line,

REACT_APP_API_URL=http://localhost:4000/api

and was working my way through the following tutorial.

Any and all help would greatly be appreciated.

Answer 1

The output of localStorage.getItem("token") being

eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJVc2VyOjEiLC??JleHAiOjE0ODcyODI4OD??csImlhdCI6MTQ4NDY5MD??g4NywiaXNzIjoiUGhvZW??5peENoYXQiLCJqdGkiOi??IwNzFlYzgwYi0wZmYzLT??QyYzgtODA3Mi1kNzViZm??VhZTg4NWEiLCJwZW0iOn??t9LCJzdWIiOiJVc2VyOj??EiLCJ0eXAiOiJhY2Nlc3??MifQ.NsuqH50HooK8vjF??fHtPH9iXSykZ9oYA0ul4??b_C5fQtpu_zFvNNy-skc??v9HI2i25X-NlB-9xOr-x??zh2abnrpYUw

suggests that for some reason, the app stored the token without passing it through JSON.stringify, and calling JSON.parse on this string throws the Unexpected token e error, as expected.

I did not see any localStorage.setItem without JSON.stringify in the current code, so the token was probably stored like that in a previous version of the app. You should try clearing it manually and logging in again.

Answer 2

This error message usually means you're getting a non-JSON response. If you look at the raw response in the Network tab of your debugger, you should be able to see what you're getting back from the server.