[NEXT-1258] Search parameters with Unicode characters cause the fetching of RSC payload to fail

[mandel59]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:41 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8103
    Binaries:
      Node: 19.1.0
      npm: 9.1.2
      Yarn: 1.22.19
      pnpm: 8.3.1
    Relevant packages:
      next: 13.3.1-canary.19
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0

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

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/mandel59/slug-with-unicode

To Reproduce

1. npm run dev
2. Open http://localhost:3000/?q=%E3%81%82. The page shows "q=あ" and a link to Another page.
3. Open dev console.
4. Hover your mouse cursor over the link.

Describe the Bug

The following message will be displayed: "Failed to fetch RSC payload. Falling back to browser navigation." The specific message may vary depending on the browser:

• Google Chrome: 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.

• Firefox: Failed to fetch RSC payload. Falling back to browser navigation. TypeError: Window.fetch: Cannot convert value in record<ByteString, ByteString> branch of (sequence<sequence<ByteString>> or record<ByteString, ByteString>) to ByteString because the character at index 36 has value 12354 which is greater than 255.

Expected Behavior

Prefetch of Another page is successfully performed.

The following image shows a prefetch request made from http://localhost:3000/?q=test.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1258

[tunatoksoz]

I am getting a similar issue - this time with seralized data containing ” character (not "). As we pass it back as part of rsc fetch request, it fails. (Either Next-Router-State-Tree or Next-Url). My json data i pass to views do contain characters that breaks this.

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

Also @mandel59 - your repo link doesn't seem to work.

[mandel59]

@tunatoksoz Thanks, the repository had become private. I just fixed it.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.