next.js: SyntaxError: Unexpected token T in JSON at position 0 WHile building the website

Verify canary release

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 (<anonymous>) 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

About this issue

Original URL
State: open
Created a year ago
Reactions: 2
Comments: 21

Most upvoted comments

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()

TesheMaximillan on Nov 30, 2023

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.

jomefavourite on Jul 11, 2023