Prefetching failed to fetch RSC payload

[somersby10ml]

Verify canary release

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

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
    Binaries:
      Node: 19.8.1
      npm: 9.6.4
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.3.1-canary.17
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/somersby10ml/next-url-test/tree/reproduction-template-app-dir

To Reproduce

1. Please run the yarn dev command to start the local development server.
2. Press the F12 key to open the Developer Tools and navigate to the http://localhost:3000 URL.
3. Click on the search button.
   • After moving, don't hover your mouse over the Home or Search buttons.
4. Click on either the move1 or move2 button.
5. Hover over either the Home or Search element.

or

1. Navigate to http://localhost:3000/search?name=%E3%84%B1%E3%84%B4%E3%84%B7%E3%84%B9 in your web browser.
2. Hover over either the Home or Search element.

Describe the Bug

• An error occurs if you use a non-English string in the URL.

console.error

Failed to fetch RSC payload. Falling back to browser navigation. TypeError: Failed to execute 'fetch' on 'Window': Failed to read the 'headers' property from 'RequestInit': String contains non ISO-8859-1 code point.

🔽 console.error

🔽 when an error occurs.

🔽 header not giving error

🔽 header giving error

Expected Behavior

console.error not showing

Which browser are you using? (if relevant)

Chrome(112.0.5615.138) FireFox(112.0.1 64Bit)

How are you deploying your application? (if relevant)

No response

[tunatoksoz]

Presumably same bug as #48728.

I imagine base64 encoding the header and decoding on server would simply work but don't know the internals of nextjs all that well.

[SK4P3]

Hi I have a similar problem. I get this error when trying to login into my nextJS app on Safari using supabase authentication.

any solution?

[jakob-fiegerl]

I got this issue as well. I am using Clerk as the auth provider.

MacOS Chrome: just works out of the box iPhone Chrome: does not work. Same error as above

[l-you]

Same error. I use cyrillic in url parameter for search. This bug is weird.

Workaround is to twice decodeURIComponent and encodeURIComponent

[james-william-r]

Related Issue in Supabase Repo: https://github.com/supabase/gotrue-js/issues/292

[bennik88]

I'm experiencing the same issue. On Chrome on IOS as well as on Desktop Chrome no problem. But Safari on IOS seems to have problems with the auth/callback route.

[bennik88]

Same error. I use cyrillic in url parameter for search. This bug is weird.

Workaround is to twice decodeURIComponent and encodeURIComponent

How do you implement this? I don't know these functions. Where do you add it? In the Supabase dashboard?

[zaru]

It seems that this problem is caused by the Headers that are sent when POSTing with Server Actions.

The problem occurs when there is Unicode (non-ISO-8859-1) in the URL. As far as I can tell, this can be reproduced in Chrome and Firefox.

The Headers that are sent look like this:

When executing Server Actions at https://example.com?foo=あ

Next-Router-State-Tree: ["",{"children":["PAGE?{"foo":"あ"}",{}]},null,null,true]

Since only ISO-8859-1 is allowed in new Headers(), the following error is displayed:

TypeError: Failed to execute 'fetch' on 'Window': Failed to read the 'headers' property from 'RequestInit': String contains non ISO-8859-1 code point.

As a countermeasure, I think it is necessary to use encodeURIComponent() when creating the header.

[zaru]

This will likely be fixed in this pull request. https://github.com/vercel/next.js/pull/53073

[zaru]

Likely fixed https://github.com/vercel/next.js/pull/53655

[SalahAdDin]

Likely fixed #53655

No, it is still happening, especially using million.js.

[sinapirani]

still have this issue when using placeholder blur for image and static import image in app dir in next 13.5.4

[landsman]

I hit the same issue today 👀

[imsatyam2111]

I was facing the similar issue and after lot of efforts I was able to find the cause and fix it.

In my case, I was creating a Blob URL for a pdf file, passing this blob URL to Link from next/Link, was causing the error. I fixed it by replacing Link with <a>

Error Trace: 472-3d8fa816d233b38b.js:1 Failed to fetch RSC payload for blob:http://localhost:4000/9ce9a9f2-7082-4909-814f-07a09a621fe8. Falling back to browser navigation. TypeError: Failed to fetch at fetchServerResponse (472-3d8fa816d233b38b.js:1:44670) at 472-3d8fa816d233b38b.js:1:60594 at Object.task (472-3d8fa816d233b38b.js:1:31702) at PromiseQueue.processNext (472-3d8fa816d233b38b.js:1:32426) at PromiseQueue.enqueue (472-3d8fa816d233b38b.js:1:31830) at prefetchReducer (472-3d8fa816d233b38b.js:1:60557) at reducer (472-3d8fa816d233b38b.js:1:69828) at 472-3d8fa816d233b38b.js:1:75184 at Object.Nf [as useReducer] (fd9d1056-cfb383b14ba14884.js:9:40411) at t.useReducer (472-3d8fa816d233b38b.js:17:7409)

Snipped used for creating blob:

  const base64str = pdf;
  const binary = window.atob(base64str.replace(/\s/g, ''));
  const len = binary.length;
  const buffer = new ArrayBuffer(len);
  const view = new Uint8Array(buffer);
  for (let index = 0; index < len; index++) {
      view[index] = binary.charCodeAt(index);
  }

  const blob = new Blob([view], { type: 'application/pdf' });
  const pdfUrl = URL.createObjectURL(blob);

  return pdfUrl;
};```

[virginus01]

I am having same issue? any solution yet?

[duc-hoang-161]

In my case, I simply disabled the prefetch flag of the Link component because I think it doesn't make any improvement if it's prefetched or not. You should consider if it's necessary to prefetch a link, not worth it to turn it on all the time.

// I'm using Auth0, this is the link to log in, it'll be redirected to auth0 so it doesn't matter if it's not prefetched
<Link prefetch={false} href="api/auth/login">Login</Link>

[jerrywu001]

when I add

export const dynamic = 'force-dynamic';

to all page.tsx

and add prefetch={false} to <Link

The error never appears.

[hellocory]

Hello friends. I found out that its easier to just turn your route into a client-side redirect after you set your cookies.

Here is an example:

(using Next 15.0.1)

import { cookies } from "next/headers";
import { generateState } from "arctic";
import { discord } from "@/lib/auth";
import { env } from "@/env";

export async function GET(): Promise<Response> {
  const sessionCookies = await cookies();
  const state = generateState();
  const url = discord.createAuthorizationURL(state, [
    "identify",
    "email"
  ]);

  sessionCookies.set("discord_oauth_state", state, {
    path: "/",
    secure: env.NODE_ENV === "production",
    httpOnly: true,
    maxAge: 60 * 10,
    sameSite: "lax",
  });

  // Return HTML that performs the redirect
  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="refresh" content="0;url=${url.toString()}">
      </head>
    </html>
  `;

  return new Response(html, {
    headers: {
      "Content-Type": "text/html",
    },
  });
}

[shonsukee]

I used Auth.js and was able to solve this problem.

$ yarn add next@latest
$ rm -rf node_modules yarn.lock
$ yarn install
$ yarn add [email protected]

[shonsukee]

Next.js: v15.0.3 Auth.js: v5.0.0-beta.25

[ap0ca]

Took me 2 days to solve similar problem on my end. It occured whenever I was redirected using <Link> component with url containing doubles slashes (for example: <Link href="http://app.local//page">) and then calling a server action with fetch, triggering: GET http://page/?_rsc=b1ube net::ERR_NAME_NOT_RESOLVED createFetch @ fetch-server-response.js:163 fetchServerResponse @ fetch-server-response.js:98

So make sure you clean your URLs when using <Link> in similar cases like mine.