Error [TypeError]: Failed to parse URL from undefined/api/graphql?pages at Object.fetch
PAYLOAD_PUBLIC_SERVER_URL=http://localhost:4000
PAYLOAD_PUBLIC_SITE_URL=http://localhost:3000are defined within the Nextjs .env file.
?
Repo:
https://github.com/taunhealy/payloadcms_melex_next
page.tsx
import { notFound } from 'next/navigation'
import { RenderBlocks } from '@/components/RenderBlocks'
import React from 'react'
import { fetchPage, fetchPages } from '../../../graphql'
import { Metadata } from 'next'
import { mergeOpenGraph } from '@/seo/mergeOpenGraph'
const Page = async ({ params: { slug } }: { params: { slug: string | string[] } }) => {
const page = await fetchPage(slug)
if (!page) return notFound()
return (
<React.Fragment>
<RenderBlocks blocks={page.layout} />
</React.Fragment>
)
}
export default Page
export async function generateStaticParams() {
const pages = await fetchPages()
return pages.map(({ breadcrumbs }) => ({
slug: breadcrumbs?.[breadcrumbs.length - 1]?.url?.replace(/^\/|\/$/g, '').split('/'),
}))
}
export async function generateMetadata({ params: { slug } }): Promise<Metadata> {
const page = await fetchPage(slug)
const ogImage =
typeof page?.meta?.image === 'object' &&
page?.meta?.image !== null &&
'url' in page?.meta?.image &&
`${process.env.NEXT_PUBLIC_CMS_URL}${page.meta.image.url}`
return {
title: page?.meta?.title || 'Payload CMS',
description: page?.meta?.description,
openGraph: mergeOpenGraph({
title: page?.meta?.title || 'Payload CMS',
description: page?.meta?.description,
url: Array.isArray(slug) ? slug.join('/') : '/',
images: ogImage
? [
{
url: ogImage,
},
]
: undefined,
}),
}
}
Is this where the error lies?
export const fetchPage = async (incomingSlugSegments?: string[]): Promise<Page | null> => {
const slugSegments = incomingSlugSegments || ['home']
const slug = slugSegments.at(-1)
const { data, errors } = await fetch(
`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql?page=${slug}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
next,
body: JSON.stringify({
query: PAGE,
variables: {
slug,
},
}),
},
).then(res => res.json())I changed the .env from PAYLOAD to NEXT and it works. Touh the slug isn't loading 'page1'...
I may open a new thread if I can't solve it.
Good morning @taun2160
Hmm, what is the issue you are having?
Hi Chris.
page1:1 GET http://localhost:3000/page1 500 (Internal Server Error) index.js:634 Uncaught TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11413:11)- error Error [TypeError]: fetch failed at Object.fetch (node:internal/deps/undici/undici:11413:11) { digest: undefinedHmm, that seems like your API hit an error
Where does that fetch occur?
ah wait I see it
Can you log out the value of
${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql?page=${slug}console.log(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql?page=${slug}`)It's compiling, brb
wait compiling... - warn Fast Refresh had to perform a full reload due to a runtime error. - event compiled client and server successfully in 437 ms (606 modules) - warn Fast Refresh had to perform a full reload due to a runtime error. - wait compiling... - warn Fast Refresh had to perform a full reload due to a runtime error. - event compiled client and server successfully in 304 ms (568 modules) - wait compiling... - event compiled successfully in 137 ms (324 modules) - warn Fast Refresh had to perform a full reload due to a runtime error. - wait compiling /(pages)/[...slug]/page (client and server)... - event compiled successfully in 157 ms (282 modules) - wait compiling /favicon.ico/route (client and server)... - event compiled successfully in 149 ms (333 modules)I think it's working
Nevermind, it just crashed with error:
page1:1 GET http://localhost:3000/page1 500 (Internal Server Error) index.js:634 Uncaught TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11413:11)It's also running very slowly?
Are you able to log the url that is being fetched?
You can also check your network requests in the dev tools
const ogImage = typeof page?.meta?.image === 'object' && page?.meta?.image !== null && 'url' in page?.meta?.image && console.log(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql?page=${slug}`)That's what I have. SHould it show inthe Vscode console or web browser console?
- wait compiling /favicon.ico/route (client and server)... - event compiled successfully in 149 ms (333 modules) - error Error [TypeError]: fetch failed at Object.fetch (node:internal/deps/undici/undici:11413:11) { digest: undefined } - error Error [TypeError]: fetch failed at Object.fetch (node:internal/deps/undici/undici:11413:11) { digest: undefined } - error Error [TypeError]: fetch failed at Object.fetch (node:internal/deps/undici/undici:11413:11) { digest: undefined } - error Error [TypeError]: fetch failed at Object.fetch (node:internal/deps/undici/undici:11413:11) { digest: undefined } - error Error [TypeError]: fetch failed at Object.fetch (node:internal/deps/undici/undici:11413:11) { digest: undefined } - error Error [TypeError]: fetch failed at Object.fetch (node:internal/deps/undici/undici:11413:11) { digest: undefined } - error Error [TypeError]: fetch failed at Object.fetch (node:internal/deps/undici/undici:11413:11) { digest: undefined }Should be in the browser console I believe
Doesn't look like it:
GET http://localhost:3000/page1 500 (Internal Server Error) index.js:634 Uncaught TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11413:11) getServerError @ client.js:1 eval @ index.js:634 setTimeout (async) hydrate @ index.js:622 await in hydrate (async) eval @ next-dev.js:48 Promise.then (async) eval @ next-dev.js:42 ./node_modules/next/dist/client/next-dev.js @ main.js?ts=1690375606173:181 options.factory @ webpack.js?ts=1690375606173:716 __webpack_require__ @ webpack.js?ts=1690375606173:37 __webpack_exec__ @ main.js?ts=1690375606173:1138 (anonymous) @ main.js?ts=1690375606173:1139 webpackJsonpCallback @ webpack.js?ts=1690375606173:1388 (anonymous) @ main.js?ts=1690375606173:9 DevTools failed to load source map: Could not load content for chrome-extension://ppkojackhibeogijphhfnamhemklmial/js/page.js.map: System error: net::ERR_BLOCKED_BY_CLIENT websocket.js:52 [HMR] connected 2DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/iframe_form_check.js.map: System error: net::ERR_BLOCKED_BY_CLIENT websocket.js:52 [HMR] connectedYa
How can I run both servers at the same time? I've just started the Payload server and the Nextjs server stopped working?
VM49:5 crbug/1173575, non-JS module files deprecated.
Hmm, since this is Next.js related I may not be the best to help out here
@jesschow any ideas on this one?
@taun2160 were you able to solve this? I'm experiencing the same issue. Weirdly enough, I experience this when I have multiple richtext in my page. It's such a hassle that I am not able to navigate to the same slug once I get the error and I needed to create a different page with a different slug.
Anyone got ideas?
I've got no idea. I'm still stuck on this.
If you figure it out please keep us posted.
I've started a new thread -
https://discord.com/channels/967097582721572934/1141709489175793767
Continue the discussion in Discord
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.