Vercel deployment failure: Unexpected token T in JSON at position 0
Answered
Polish posted this in #help-forum
PolishOP
I've been trying to deploy my tiny project to Vercel, but I keep getting this extremely nebulous error which I don't know how to resolve. I'm using Supabase and merely pulling from a single table called infotable.
This is my Github repository: https://github.com/Poyoanon/lost-arkive
The only real component in this project is SkillTable.tsx, and last known working vercel deployment was here: https://lost-arkive-poyoanon.vercel.app/skilltable.
Any clue what is causing this problem? The code in the repository works just fine in my local environment, npm run build works, vercel dev works, but whenever I deploy to Vercel I simply run into this error without fail, and I'm not really sure why. Forgive me, I'm fairly new to this.
This is my Github repository: https://github.com/Poyoanon/lost-arkive
The only real component in this project is SkillTable.tsx, and last known working vercel deployment was here: https://lost-arkive-poyoanon.vercel.app/skilltable.
Any clue what is causing this problem? The code in the repository works just fine in my local environment, npm run build works, vercel dev works, but whenever I deploy to Vercel I simply run into this error without fail, and I'm not really sure why. Forgive me, I'm fairly new to this.
Answered by Rafael Almeida
I am giving a closer look at the error message and the stack trace is pointing to a
Are you sure this variable is valid JSON? It is also doing the same with
Array.map function call, so I think the issue is not with supabase but with the rendering of the component. Here in this part of the JSX you are parsing skill.tripod_images: https://github.com/Poyoanon/lost-arkive/blob/d53ea334187943e08c84fb4d472a5081030af054/components/SkillTable.tsx#L135-L160Are you sure this variable is valid JSON? It is also doing the same with
skill.tripod_priority, which might also not be valid JSON. Maybe it has already been parsed by supabase? Or the production DB has different data on the tables15 Replies
@Polish I've been trying to deploy my tiny project to Vercel, but I keep getting this extremely nebulous error which I don't know how to resolve. I'm using Supabase and merely pulling from a single table called infotable.
This is my Github repository: https://github.com/Poyoanon/lost-arkive
The only real component in this project is SkillTable.tsx, and last known working vercel deployment was here: https://lost-arkive-poyoanon.vercel.app/skilltable.
Any clue what is causing this problem? The code in the repository works just fine in my local environment, npm run build works, vercel dev works, but whenever I deploy to Vercel I simply run into this error without fail, and I'm not really sure why. Forgive me, I'm fairly new to this.
Unexpected token ... in JSON at position 0 usually means the server replied with an error instead of the JSON data. If it's working everywhere except in the vercel deployment then the env vars might be wrong. Maybe check them and make sure Supabase didn't change them@Rafael Almeida `Unexpected token ... in JSON at position 0` usually means the server replied with an error instead of the JSON data. If it's working everywhere except in the vercel deployment then the env vars might be wrong. Maybe check them and make sure Supabase didn't change them
PolishOP
I checked them and I've already added my own local .env file to the Vercel project's deployment as well, but if it was wrong in the first place I would assume it would've said invalid URL, not unexpected token? It's just a bit weird because it otherwise works, npm run build works, vercel dev works, but running just vercel in terminal just leads to that error. I tried wrapping what I thought was the offenders in a try catch block, nothing, still the vague unexpected token , or unexpected token T.
I am giving a closer look at the error message and the stack trace is pointing to a
Are you sure this variable is valid JSON? It is also doing the same with
Array.map function call, so I think the issue is not with supabase but with the rendering of the component. Here in this part of the JSX you are parsing skill.tripod_images: https://github.com/Poyoanon/lost-arkive/blob/d53ea334187943e08c84fb4d472a5081030af054/components/SkillTable.tsx#L135-L160Are you sure this variable is valid JSON? It is also doing the same with
skill.tripod_priority, which might also not be valid JSON. Maybe it has already been parsed by supabase? Or the production DB has different data on the tablesAnswer
@Rafael Almeida I am giving a closer look at the error message and the stack trace is pointing to a `Array.map` function call, so I think the issue is not with supabase but with the rendering of the component. Here in this part of the JSX you are parsing `skill.tripod_images`: https://github.com/Poyoanon/lost-arkive/blob/d53ea334187943e08c84fb4d472a5081030af054/components/SkillTable.tsx#L135-L160
Are you sure this variable is valid JSON? It is also doing the same with `skill.tripod_priority`, which might also not be valid JSON. Maybe it has already been parsed by supabase? Or the production DB has different data on the tables
PolishOP
they're a string array, not JSON, but even if I changed it to jsonb, the error persists, but i can try and change it to jsonb and get back to you because i'm pretty sure it still had the same issue
PolishOP
swapped it all properly, still errors out, even console.logged them and they return valid JSON. frustratingly, it works in my local env but I'm starting to think it's on vercel
@Polish swapped it all properly, still errors out, even console.logged them and they return valid JSON. frustratingly, it works in my local env but I'm starting to think it's on vercel
yeah this is indeed valid JSON. are these values logged from vercel itself?
if the logs are from Vercel then I am not sure why it's failing to parse
@Rafael Almeida yeah this is indeed valid JSON. are these values logged from vercel itself?
PolishOP
those are just from console.logging the output from the database, how would I log it from vercel?
you can add a
console.log inside the component that you are trying to render then it will show up on vercel logsPolishOP
shows up as json
it looks like this is already an object, not a string 🤔
you can make sure by also logging
you can make sure by also logging
typeof var and it should output 'string'. otherwise if it is indeed an object you don't need to use JSON.parse otherwise you will receive this exact error about an unexpected tokenPolishOP
oh yeah it returns object
yeah now it works, i feel really dumb now
no worries! now you know how to debug it 