Next.js Discord

Discord Forum

Client side fetching error during production build

Answered
Spectacled bear posted this in #help-forum
Open in Discord
Spectacled bearOP
Hi,

I am currently facing an issue that i can really seem to find a solution for.

In a page i have a function that makes a request to the api directory.
The URL seems to give some issues when generating a production build.


Here is a snippet of the code and error i recieve
Answered by joulev
Where do you use this getGroupItems
View full answer

13 Replies

Spectacled bearOP
const getGroupItems = async () => {
  const res = await fetch(`/api/project/breakdown`, {
    body: JSON.stringify({ id }),
    method: "POST",
  });

  let data = await res.json();
  if (!res.ok) {
    console.log("Error getting group items");
  }
  dispatch(addMultipleGroups(data));
};
This is the error i recieve
          throw new TypeError("Failed to parse URL from " + input, { cause: err });
                  ^
TypeError: Failed to parse URL from /api/project/breakdown
    at new Request (node:internal/deps/undici/undici:7134:19)
Spectacled bearOP
Im using app dir btw
and have tried searching on stackoverflow and also using the .env for the url
Barbary Lion
@Spectacled bear add use client at the top of the file
Spectacled bearOP
i added it
the thing is its a client side rendered page which calls the api route
but doesnt seem to work when deployed
Answer
Spectacled bearOP
Forgot to close it sorry
Thanks for answering to the both of you
The solution: I was using an api directory although i had the app router. Inside the api directory was all of my supabase logic stuff. For this particular page that im working on i couldnt access it, so instaed i just used supabases clientcomponent to communicate with my db