Server Components fetch() throws in page.tsx

[TCGAUD]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 18.14.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.2.3
      eslint-config-next: 13.2.1
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.2.3", newest: "13.2.4-canary.4".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

Which example does this report relate to?

async/await in Server Components

What browser are you using? (if relevant)

Opera

How are you deploying your application? (if relevant)

No response

Describe the Bug

In your page.tsx file.
fetch() always throws : TypeError: Failed to parse URL from /api/getCards
It also throws if you using axios.

Expected Behavior

As per example on website https://beta.nextjs.org/docs/data-fetching/fetching#asyncawait-in-server-components
It uses the page.tsx file.

It should work as expected.
How it doesn't.

To Reproduce

Create a page.tsxx
And attempt the following code

import React from 'react';
async function HomePageChild() {
const data = await fetch('/api/getCards') // throws "TypeError: Failed to parse URL from /api/getCards"
return (
<> Child</>
)

};

export default HomePageChild

[TCGAUD]

Please note.
Now for some reason the Page.tsx renders 404.
If i install a fresh version and try fetch on Next.js Boiler plate homepage.
Type error again

[jleclanche]

Can you check if this works in next@13.1.7-canary.13 and next@13.1.7-canary.14 by any chance? I'm wondering if it's related to what I'm getting (#46841)

[TCGAUD]

I still get the same error

[TCGAUD]

It seems to only be happening using Node 18.x

Seems that had this issue before.
Apparently its suppose to be fixed

[TCGAUD]

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
  Node: 18.14.2
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.2.4-canary.4
  eslint-config-next: 13.2.3
  react-dom: 18.2.0

[mdrayer]

I get the same error message when I use a relative path (error - TypeError: Failed to parse URL from /api/hello). Using an absolute path to the API route (e.g. http://localhost:3000/api/hello) fixes the issue for me.

EDIT: Here's my next info if it helps

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Thu Sep 29 20:12:57 PDT 2022; root:xnu-8020.240.7~1/RELEASE_X86_64
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.2.4-canary.4
      eslint-config-next: 13.2.4-canary.4
      react: 18.2.0
      react-dom: 18.2.0

[TCGAUD]

That helps me.
Thanks man.

It's quite sad because it can cause issues later on maxing it fixed with http://localhost:3000/
Should be able to use 'api/Hello'

[klitown]

Any info to this? In development it is solved by using an absolute route (e.g. http://localhost:3000/api/hello) but if I want to deploy to Vercel, obviously this route would not work.
I am using Node 16.8.0

[IrakliK]

Running into the same issue

[arnelamo]

Same issue here, using http://localhost:3000/... fixes it.....

[vhmartinezm]

Same issue. In the meantime I'm using this that works in all my environments:

import { headers } from "next/headers";

// Inside the page component
const headersData = headers();
const protocol = headersData.get("x-forwarded-proto");
const host = headersData.get("host");
const data = await fetch(`${protocol}://${host}/api/hello`);

[Podfelix]

import { headers } from "next/headers";

// Inside the page component
const headersData = headers();
const protocol = headersData.get("x-forwarded-proto");
const host = headersData.get("host");
const data = await fetch(${protocol}://${host}/api/hello);

[laclance]

I have the same issue but can't use next/headers because parent component is a client component so get this error:
You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.

[PeterGKafkakis]

Same issue. In the meantime I'm using this that works in all my environments:

import { headers } from "next/headers";

// Inside the page component
const headersData = headers();
const protocol = headersData.get("x-forwarded-proto");
const host = headersData.get("host");
const data = await fetch(`${protocol}://${host}/api/hello`);

This works perfectly.