next.js: Prefetching failed to fetch RSC payload
Verify canary release
- 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
- Please run the yarn dev command to start the local development server.
- Press the F12 key to open the Developer Tools and navigate to the http://localhost:3000 URL.
- Click on the
search
button.- After moving, don’t hover your mouse over the
Home
orSearch
buttons.
- After moving, don’t hover your mouse over the
- Click on either the
move1
ormove2
button. - Hover over either the
Home
orSearch
element.
or
- Navigate to http://localhost:3000/search?name=ㄱㄴㄷㄹ in your web browser.
- Hover over either the
Home
orSearch
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
About this issue
- Original URL
- State: open
- Created a year ago
- Reactions: 25
- Comments: 17 (1 by maintainers)
Commits related to this issue
- #10 Feat: 검색어 쿼리파라미터 제거 - 쿼리파라미터로 한글 추가시 문제발생 https://github.com/vercel/next.js/issues/48677 — committed to imnotpizza/my-news-vault by imnotpizza a year ago
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?
when I add
to all page.tsx
and add
prefetch={false}
to<Link
The error never appears.
This will likely be fixed in this pull request. https://github.com/vercel/next.js/pull/53073
Same error. I use cyrillic in url parameter for search. This bug is weird.
Workaround is to twice
decodeURIComponent
andencodeURIComponent
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 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