vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.23k stars 27.02k forks source link

SyntaxError: Unexpected token T in JSON at position 0 WHile building the website #47554

Open AnasAitzouinet opened 1 year ago

AnasAitzouinet commented 1 year ago

Verify canary release

Provide environment information

Hi , im trying to build my website and i get this error, i tried a lot of thing but nothing were helpful :

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/AnasAitzouinet/my-eco

To Reproduce

info - Collecting page data .SyntaxError: Unexpected token T in JSON at position 0 at JSON.parse () at parseJSONFromBytes (node:internal/deps/undici/undici:6498:19) at successSteps (node:internal/deps/undici/undici:6472:27) at node:internal/deps/undici/undici:1145:60 at node:internal/process/task_queues:140:7 at AsyncResource.runInAsyncScope (node:async_hooks:204:9) at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Build error occurred Error: Failed to collect page data for /Product/[id] at C:\Users\anasa\OneDrive\Documents\Git\Garboz\my-eco\node_modules\next\dist\build\utils.js:1055:15 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { type: 'Error'

Describe the Bug

im just tryin the website by next build and i get this error even thought i did alot of fixes but nothing worked

Expected Behavior

trying to build it

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

ascholz81 commented 1 year ago

I'm seeing this in a deployed application. Currently our leading thought is using Node 18. This stack seems to be very low level in Node itself.

The error is random. All api and ANY JSON.parse calls are wrapped in try/catch. I can't reproduce it locally.

crava-logico-srl commented 1 year ago

Same happened to us. Production deployed app, just upgraded to next 13.2.4

next app sends back 500 error, and the only recurrent log in pm2 logs is

_SyntaxError: Unexpected token T in JSON at position 0 at JSON.parse () at parseJSONFromBytes (node:internal/deps/undici/undici:6498:19) at successSteps (node:internal/deps/undici/undici:6472:27) at node:internal/deps/undici/undici:1145:60 at node:internal/process/task_queues:140:7 at AsyncResource.runInAsyncScope (node:async_hooks:204:9) at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8) at process.processTicksAndRejections (node:internal/process/taskqueues:95:5)

Svisstack commented 1 year ago

Same here, how you guys made this work?

AlexandreBourdeaudhui commented 1 year ago

Same here, how you guys made this work?

Dunno if that can help you, but, switched the Node.js version, from 18.15, to 16.13... Give me more details on the unexpected error... With Node.js 18.XX, i have an error log "Unexpected token < in JSON at position 2" With Node.js 16.13, i have another error log "FetchError: invalid json response body at https://xxx-site.httpd.docker.localhost/user/2/edit, reason: Unexpected token < in JSON at position 2". With the (new) stacktrace i logged (/opt/nextjs/node_modules/next/dist/compiled/node-fetch/index.js:1:51255) and saw i got an HTML output.

tamvm commented 1 year ago

any suggestion to fix this with nextjs 13.x, I have tried with the latest nextjs version 13.4.2 but it still doesn't work

Ionito commented 1 year ago

same thing is happening to me, any idea?

mcapodici commented 1 year ago

I am getting the same error. What is a stable version of NextJS to downgrade to?

Edit: this one was my fault, ignore!

AndreChavs commented 1 year ago

I have the same error I'm using versions:

Error: Failed to collect page data for /[id] at ...\node_modules\next\dist\build\utils.js:1055:15 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { type: 'Error' } node - 18.7.0 Next - 13.2.4

Surfer-Alex commented 1 year ago

same here,

SyntaxError: Unexpected token < in JSON at position 0

21:09:13.269 | at JSON.parse () 21:09:13.269 | at parseJSONFromBytes (node:internal/deps/undici/undici:6498:19) 21:09:13.269 | at successSteps (node:internal/deps/undici/undici:6472:27) 21:09:13.270 | at node:internal/deps/undici/undici:1145:60 21:09:13.270 | at node:internal/process/task_queues:140:7 21:09:13.270 | at AsyncResource.runInAsyncScope (node:async_hooks:204:9) 21:09:13.271 | at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8) 21:09:13.271 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

hammadqurashi commented 1 year ago

Works fine for me in dev mode but when deploying it to vercel it gives the error:

SyntaxError: Unexpected token T in JSON at position 0 -- 17:06:22.809 | at JSON.parse () 17:06:22.810 | at parseJSONFromBytes (node:internal/deps/undici/undici:6571:19) 17:06:22.810 | at successSteps (node:internal/deps/undici/undici:6545:27) 17:06:22.811 | at node:internal/deps/undici/undici:1211:60 17:06:22.811 | at node:internal/process/task_queues:140:7 17:06:22.812 | at AsyncResource.runInAsyncScope (node:async_hooks:203:9) 17:06:22.812 | at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8) 17:06:22.813 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
jomefavourite commented 1 year ago

Mine is SyntaxError: Unexpected token o in JSON at position 1

jomefavourite commented 1 year ago

I fixed this issue by using the Function method

// Instead of JSON.parse(someVar) use this instead
Function("return " + someVar)

Though I don't know if there's any security risk using the Function method, but it parses the JSON string (someVar) to an object.

rodolphoasb commented 1 year ago

Same error here! I can't receive a simple POST request on my endpoints without seeing this error.

- error SyntaxError: Unexpected number in JSON at position 1
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:6571:19)
    at successSteps (node:internal/deps/undici/undici:6545:27)
    at node:internal/deps/undici/undici:1211:60
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
ArthurDias01 commented 1 year ago
SyntaxError: Unexpected token < in JSON at position 0 -- 15:13:37.473 | at JSON.parse () 15:13:37.474 | at parseJSONFromBytes (node:internal/deps/undici/undici:6571:19) 15:13:37.474 | at successSteps (node:internal/deps/undici/undici:6545:27) 15:13:37.474 | at node:internal/deps/undici/undici:1211:60 15:13:37.474 | at node:internal/process/task_queues:140:7 15:13:37.474 | at AsyncResource.runInAsyncScope (node:async_hooks:203:9) 15:13:37.474 | at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8) 15:13:37.474 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Has anyone found a solution? (reproducible src code) https://github.com/ArthurDias01/arthurdiasdev/tree/85b4985f6c36db3d04dc96de4ecd59504d2d2462

SheikhArman100 commented 1 year ago

Verify canary release

  • [x] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Hi , im trying to build my website and i get this error, i tried a lot of thing but nothing were helpful :

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/AnasAitzouinet/my-eco

To Reproduce

info - Collecting page data .SyntaxError: Unexpected token T in JSON at position 0 at JSON.parse () at parseJSONFromBytes (node:internal/deps/undici/undici:6498:19) at successSteps (node:internal/deps/undici/undici:6472:27) at node:internal/deps/undici/undici:1145:60 at node:internal/process/task_queues:140:7 at AsyncResource.runInAsyncScope (node:async_hooks:204:9) at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Build error occurred Error: Failed to collect page data for /Product/[id] at C:\Users\anasa\OneDrive\Documents\Git\Garboz\my-eco\node_modules\next\dist\build\utils.js:1055:15 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { type: 'Error'

Describe the Bug

im just tryin the website by next build and i get this error even thought i did alot of fixes but nothing worked

Expected Behavior

trying to build it

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

have you got any solution?

razlani commented 1 year ago

Anyone have a fix for this? I can't build or deploy my SSG site at all which is a real blocker! Error seems to bomb out on making network calls during the pre-render process

sst bind next dev works well sst bind next build - is a whoopsy on said network calls :(

More info here https://discord.com/channels/983865673656705025/1138428188238807205/1138428188238807205

razlani commented 1 year ago

Anyone have a fix for this? I can't build or deploy my SSG site at all which is a real blocker! Error seems to bomb out on making network calls during the pre-render process

sst bind next dev works well sst bind next build - is a whoopsy on said network calls :(

More info here https://discord.com/channels/983865673656705025/1138428188238807205/1138428188238807205

So had time to figure out my issue this eve - for anyone else pre-rendering at build time via SSG: you need to have a dev server running as you are most likely getting internal server errors from your network calls, assuming you haven't previously deployed your backend, for those endpoints to be hit.

If you are using sst like I am: It's sst dev from the root, sst bind next build from your site's local package.json.

If you encounter the infamous infinite info Collecting page data ... error, pm me I guess: I didn't isolate my solutions so don't have an exact fix for how to overcome that one.

Good luck!

prashant523580 commented 1 year ago

SyntaxError: Unexpected end of JSON input

01:01:40.886 | at JSON.parse () 01:01:40.886 | at parseJSONFromBytes (node:internal/deps/undici/undici:6662:19) 01:01:40.886 | at successSteps (node:internal/deps/undici/undici:6636:27) 01:01:40.886 | at node:internal/deps/undici/undici:1236:60 01:01:40.886 | at node:internal/process/task_queues:140:7 01:01:40.886 | at AsyncResource.runInAsyncScope (node:async_hooks:203:9) 01:01:40.886 | at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8) 01:01:40.887 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 01:01:40.888 | TypeError: Cannot destructure property 'artists' of '(intermediate value)' as it is null. 01:01:40.888 | at Home (/vercel/path0/.next/server/app/(public)/page.js:1245:11) 01:01:40.888 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 01:01:40.891 |   01:01:40.891 | Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error 01:01:40.891 | TypeError: Cannot destructure property 'artists' of '(intermediate value)' as it is null. 01:01:40.891 | at Home (/vercel/path0/.next/server/app/(public)/page.js:1245:11) 01:01:40.891 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Solve nextjs13.4.12 and mongoose

await Category.find()
await collectionname.find().populated("category");

if your collection is populated Mongoose ObjectId you need to find queries for populate Mongoose ObjectId

RodrigoRibeiroBMG commented 1 year ago

Removed the redundant use of JSON.stringify on the fetch response. Previously, we were attempting to stringify an already parsed JSON object, which led to the error Unexpected token o in JSON at position 0. This fix ensures that the response data is processed correctly without unnecessary conversions.

raihanmd commented 1 year ago

in my case i just catch the error from json while fetching api with

const res = fetch('blablabla') if (res.headers.get("Content-Type") !== "application/json") return

return await res.json()

TesheMaximillan commented 12 months ago

Hello guys, the issue is getting data using fetch,

Every component in next js is a server component, so, just fetch data directly, instead of using fetch.

This code is not working incase of vercel, ....,

export async function getData(url: string) {
    const res = await fetch(`${baseUrl}/api/${url}`, {
      cache: 'no-cache',
    });

    if (!res.ok) {
      throw new Error((await res.json()).message);
    }

    const data = await res.json();
    return data;
}

fetch data directly like this

export const data = async () => {
  const res = await db.someTable.findMany();

  return res;
};

Note:db: is the database, like prisma or something... in mycase, I used prisma so, that is why i used db.sometable.findMany()

ThalysonMenezes commented 6 months ago

I had the same error and fixed it by putting the API call inside the try-catch block.

This error was inside a route.ts file, and in it, I was making a fetch call that was not being handled.

vnthanhdng commented 1 month ago

I am getting the same error. What is a stable version of NextJS to downgrade to?

Edit: this one was my fault, ignore!

Hi, can you elaborate on how you detected the bug and fixed it? I am running into the same error.