need help to resolve build error
Unanswered
Cuvier’s Dwarf Caiman posted this in #help-forum
Cuvier’s Dwarf CaimanOP
when i run yarn build throw this error how can i resolve it
[ ==] - info Generating static pages (8/17)TypeError: fetch failed
at Object.fetch (C:\Users\faiza\Documents\GitHub\gmae-ecommerce-cms-next-13\node_modules\next\dist\compiled\undici\index.js:1:26669)
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
cause: Error: connect ECONNREFUSED 127.0.0.1:3000
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)
at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
errno: -4078,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '127.0.0.1',
port: 3000
}
}
Error occurred prerendering page "/categories". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
at Object.fetch (C:\Users\faiza\Documents\GitHub\gmae-ecommerce-cms-next-13\node_modules\next\dist\compiled\undici\index.js:1:26669)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
- info Generating static pages (17/17)
[ ==] - info Generating static pages (8/17)TypeError: fetch failed
at Object.fetch (C:\Users\faiza\Documents\GitHub\gmae-ecommerce-cms-next-13\node_modules\next\dist\compiled\undici\index.js:1:26669)
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
cause: Error: connect ECONNREFUSED 127.0.0.1:3000
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)
at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
errno: -4078,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '127.0.0.1',
port: 3000
}
}
Error occurred prerendering page "/categories". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
at Object.fetch (C:\Users\faiza\Documents\GitHub\gmae-ecommerce-cms-next-13\node_modules\next\dist\compiled\undici\index.js:1:26669)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
- info Generating static pages (17/17)
Export encountered errors on following paths:/(customer)/categories/page: /categories
36 Replies
Cuvier’s Dwarf CaimanOP
my /categories page is look like this
Cuvier’s Dwarf CaimanOP
import Image from "next/image";
import Link from "next/link";
import { getCategories } from "./_queries";
const Page = async () => {
const { categories } = await getCategories();
return !!categories?.length ? (
<div className="max-w-3xl p-2 mx-auto mt-4">
<div className="grid grid-cols-2 gap-2 md:grid-cols-3">
{categories?.map((category) => (
<div key={category?.id} className="relative h-48 rounded-md">
<Link href={
<Image
src={
fill
className="object-cover rounded-md"
alt={
/>
<div className="absolute inset-0 flex items-center justify-center text-lg text-center text-white rounded-md bg-gray-700/40">
{category?.name}
</div>
</Link>
</div>
))}
</div>
</div>
) : (
<p>Categories Not Found</p>
);
};
export default Page;
import Link from "next/link";
import { getCategories } from "./_queries";
const Page = async () => {
const { categories } = await getCategories();
return !!categories?.length ? (
<div className="max-w-3xl p-2 mx-auto mt-4">
<div className="grid grid-cols-2 gap-2 md:grid-cols-3">
{categories?.map((category) => (
<div key={category?.id} className="relative h-48 rounded-md">
<Link href={
/categories/${category?.slug}}><Image
src={
https://lh3.googleusercontent.com/d/${category?.images?.src}=s220}fill
className="object-cover rounded-md"
alt={
${category?.name}}/>
<div className="absolute inset-0 flex items-center justify-center text-lg text-center text-white rounded-md bg-gray-700/40">
{category?.name}
</div>
</Link>
</div>
))}
</div>
</div>
) : (
<p>Categories Not Found</p>
);
};
export default Page;
joulev
show me your getCategories()
it is the culprit
Cuvier’s Dwarf CaimanOP
import { cache } from "react";
import { CategoriesTypes } from "./_types";
export const getCategories = cache(async (): Promise<CategoriesTypes> => {
const res = await fetch(
return res.json()
})
import { CategoriesTypes } from "./_types";
export const getCategories = cache(async (): Promise<CategoriesTypes> => {
const res = await fetch(
${process.env.BASE_URL}/categories/apis/get-categories, { next: { revalidate: 60 } })return res.json()
})
joulev
yes, so the issue is that you are fetching your own api routes which doesn't work during build because during build your api routes aren't running
see my link above for more info
Cuvier’s Dwarf CaimanOP
my api route is
import { prisma } from "@/config/db"
import { NextResponse } from "next/server"
export async function GET() {
try {
const categories = await prisma.categories.findMany({
select: {
id: true,
name: true,
slug: true,
images: {
select: {
id: true,
src: true
}
}
}
})
return NextResponse.json({ categories })
} catch (e) {
console.log(e)
}
}
import { NextResponse } from "next/server"
export async function GET() {
try {
const categories = await prisma.categories.findMany({
select: {
id: true,
name: true,
slug: true,
images: {
select: {
id: true,
src: true
}
}
}
})
return NextResponse.json({ categories })
} catch (e) {
console.log(e)
}
}
Cuvier’s Dwarf CaimanOP
api route is working properly.
{
"categories": [
{
"id": "31b8d91b-2cf9-495c-beb5-0be3ab7b9978",
"name": "Mobile Phones",
"slug": "mobile-phones",
"images": {
"id": "399d1973-2c9e-4d42-b97a-fe13367f2e4d",
"src": "1jN5mwkTo600h6p_GvM9eOMjDvswvMYEy"
}
},
{
"id": "576aa0d2-fc07-4c19-b7bb-d27be48883ff",
"name": "Networking Accessories",
"slug": "networking-accessories",
"images": {
"id": "0c413beb-9479-4813-9072-123ede7d67dc",
"src": "1DHEO4LwJ6k2vbO7RfBD6VS1rzaXvLEZj"
}
},
{
"id": "a8c8bb7a-ce54-4750-841e-c2b5b885db3e",
"name": "Printer Or Scanner",
"slug": "printers",
"images": {
"id": "15cee9df-12b0-4962-a58e-8d4bd1add072",
"src": "14Vkm5asIZI_yqz9nPetsEO7vMDKcn-jl"
}
}
]
}
"categories": [
{
"id": "31b8d91b-2cf9-495c-beb5-0be3ab7b9978",
"name": "Mobile Phones",
"slug": "mobile-phones",
"images": {
"id": "399d1973-2c9e-4d42-b97a-fe13367f2e4d",
"src": "1jN5mwkTo600h6p_GvM9eOMjDvswvMYEy"
}
},
{
"id": "576aa0d2-fc07-4c19-b7bb-d27be48883ff",
"name": "Networking Accessories",
"slug": "networking-accessories",
"images": {
"id": "0c413beb-9479-4813-9072-123ede7d67dc",
"src": "1DHEO4LwJ6k2vbO7RfBD6VS1rzaXvLEZj"
}
},
{
"id": "a8c8bb7a-ce54-4750-841e-c2b5b885db3e",
"name": "Printer Or Scanner",
"slug": "printers",
"images": {
"id": "15cee9df-12b0-4962-a58e-8d4bd1add072",
"src": "14Vkm5asIZI_yqz9nPetsEO7vMDKcn-jl"
}
}
]
}
joulev
no it isn't. it only works during dev mode or when you run npm start. when you build the app, the api isn't running at that time
that's why the build fails
just see the link i provided
Cuvier’s Dwarf CaimanOP
ok im reading this article
so how can i solve this issue????
??
joulev
move the logic from the api route to your server component
Cuvier’s Dwarf CaimanOP
okay
but one more error on running build
like this
[ ] - info Generating static pages (2/17)(node:4460) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
(Use
(node:13676) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
(Use
[=== ] - info Generating static pages (4/17)(node:12036) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
(Use
(Use
node --trace-warnings ... to show where the warning was created)(node:13676) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
(Use
node --trace-warnings ... to show where the warning was created)[=== ] - info Generating static pages (4/17)(node:12036) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
(Use
node --trace-warnings ... to show where the warning was created)how to solve this
i do not know what mean of this eror
joulev
it's not an error
Cuvier’s Dwarf CaimanOP
so what is this
joulev
it's just an experimental warning indicating an experimental feature is used
the experimental feature is buffer.Blob
if you don't use it anywhere it means one of your dependencies uses it and you don't need to care about the warning
Cuvier’s Dwarf CaimanOP
okay.. thanks for your time joulev. but i have one more question for you i used this fetching pattern many server component in this project its working but in categories page its throw error why??
joulev
Probably other server components are not run during build time (e.g. in a dynamic page)
Cuvier’s Dwarf CaimanOP
hi
how r u?
can you tell me that. How to revalidate page.tsx or revalidate using with revalidatePath function for revalidate intercept route
for example i have layout which is reciveing two props one is xxx and second is yyy. i wont to revalidate path using revalidatePath("/page/@xxx") like this ... ???
for example i have layout which is reciveing two props one is xxx and second is yyy. i wont to revalidate path using revalidatePath("/page/@xxx") like this ... ???