Build error in vercel related to fetching data

[mariogilezan]

Summary

Hello everybody,

So, I am trying to upload this project that uses local json file and while in development mode and even when building and starting the production server, everything works as intended.
Now, when I try to deploy this project on vercel, I get fetch failed error and I know there's something that I miss with this new app workflow, but I'm unable to pinpoint that problem.
I'll include my project repo, if you want to recreate this same issue on your end.

Here are some screenshots that may help:

Additional information

No response

Example

https://github.com/mariogilezan/e-build

[icyJoseph]

Are you absolutely sure it works locally? Like I mean next build.

The problem as I understand you have it, is that you are trying to reach for port 3000, on the Vercel deploy instance, but there's just nothing running there, because the server is in the process of being build.

It is a sort of catch-22, to have the server, you need the build step, but during the build step you want a server to handle the /api/componentsList endpoint.

It is worth nothing that other frameworks solve this by using a special $fetch: https://nuxt.com/docs/guide/concepts/server-engine#direct-api-calls that loads the code for that endpoint and gets the data, though Idk if they support that during build time... I know they do during runtime.

So in your case, just skip doing the fetch and import the JSON into the server component directly. You can even just use fs (file system) to open the JSON file, parse it and use it as data. That's the beauty of the server components.

In terms of architecture it is always a bit odd, at least for me, to make a request to the server for a page, and inside that request, make a request for the same server. Just go get the data you need at component level.

[pmmutiti]

👍

[mariogilezan]

Yes, it works without problem locally, including next build and this occurs just when trying to deploy it.
I know that its kind of strange to fetch data as you said directly for a page, but since that is one of the selling point of this newer version of Next, I thought maybe I'm missing something.
I was thinking about using fs as well, since that was one of the ways before with earlier versions of Next.
Either way, thank you for your feedback and I'll make sure to update this thread if I manage to solve this error.

[icyJoseph]

What next.js version do you have? I tried quickly yesterday and it failed locally too, with the same error you get on deploy.

[icyJoseph]

I know that its kind of strange to fetch data as you said directly for a page, but since that is one of the selling point of ...

It's not strange. The part that often doesn't work, is fetching data from the server itself, because the server doesn't exist yet.

[icyJoseph]

Is this the project? https://github.com/mariogilezan/e-build, I cloned it, and it fails to build with the same errors you posted:

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11404:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 3000
  }
}

I wonder if locally you have:

• next dev running in one terminal
• next build runs in another terminal

So it works because the next dev server, helps the builder. This is the only way I managed to make it work locally. You can't do that when deploying.

Restart your machine and try to do a build. It'll fail.

[mariogilezan]

You are right, now it failed on my end as well.
What helps building locally is not the dev server running in the background itself, its the .next folder that you get when you run either npm run dev or npm run build, but to manage to build successfully, the order is important. First you run the dev server that will provide you with .next folder and then when you build, you'll not fail because you already have .next which will help to build the project. If you delete .next folder and try to build first, you'll get the same error locally as well.

[icyJoseph]

Nope that doesn't work for me at all.

Why would that work? You are making a request to 127.0.0.1 at port 3000, there's just nothing running there. It must be that your next dev server is still running.

Regardless, the problem is still that you are already on the server, at this point:

import ComponentsLayout from '@/components/ComponentsLayout';

export const metadata = {
  title: 'EBuild - CPU',
  openGraph: {
    title: 'CPU',
  },
};

export default async function CpuPage() {
  const res = await fetch('http://127.0.0.1:3000/api/componentsList', {
    cache: 'force-cache',
  });
  const data = await res.json();
  return (
    <>
      <ComponentsLayout
        componentList={data.cpu}
        componentName='cpu'
        title='CPU'
      />
    </>
  );
}

And instead of just loading the data you need from either JSON or some third party CDN, you try to fly another request to your own server, which doesn't exist yet. That's just not gonna work.

[mariogilezan]

I don't know, that's how it works for me.
In the past versions of Next, you could do it like this:

1. create js file to read and parse local json data using fs and path and export that parsed data
2. in the index.js in pages folder, import that data and use it in getStaticProps and pass the result as props

If I'm not able to do it with api approach, I'll ditch that api way entirely and try to do it like I mentioned above.

[icyJoseph]

Yes, using an API route is more for 3rd parties. For example, I can go to your site.com/api/componentsList and see the JSON there, and likewise your client side code can do that.

On the server, you should just use the power of Node.js and keep it simple.

[mariogilezan]

Since I work with local json data, I removed completely the api approach and did it by using fsPromises and path to find and read data.
Here is the repo with updated solution: https://github.com/mariogilezan/e-build

Also, I want to give credit to Lorenzo Zarantonello, who wrote this blog post in regards to reading local json data in NextJS: https://dev.to/this-is-learning/reading-local-json-data-with-nextjs-part-5-59le

[icyJoseph]

Sweet! The pages docs also have a how to guide, https://nextjs.org/docs/pages/api-reference/functions/get-static-props#reading-files-use-processcwd, even though it is for getStaticProps, it is still just Node.js so it works the same way in Server Components.

There's also this blog post from Vercel https://vercel.com/guides/loading-static-file-nextjs-api-route#add-the-api-route, but it uses fetch from the client with SWR.

Good job!

[mariogilezan]

Thank you, I appreciate that.

Now I see how great is this new way of accessing data in Server Components, without needing to use getStaticProps.
Once again, thank you for your feedback and your time you took to try it yourself and direct me towards this solution.

I'll leave this discussion open for now if someone else wants to share their idea as well.

[kafuch11]

i solved the same problem this way. And is Solved for me.Is it right

export const getCategory = async () => {
    try      
        const response = await fetch('https://localhost:3000/api/user/products/categories').then(res => res.json()).then(data => data.data).catch(err => { console.log(err); return []} );
        return response;

    } catch (err) {
        console.error('Error fetching products:', err);
        return null;
    }
}