[Bug]: (v7) Static Prerender Error: Cannot convert argument to a ByteString due to invalid character value

[saengmotmi]

What version of React Router are you using?

7.0.0-pre.1

Steps to Reproduce

1. Go to https://stackblitz.com/edit/vitejs-vite-p1wvlg?file=package.json
2. Run npm run build

---

When performing static pre-rendering in a RRv7, an error related to ByteString conversion occurs during the prerendering process.

Error Message:

Cannot convert argument to a ByteString because the character at index 79 has a value of 44608 which is greater than 255.
    at webidl.converters.ByteString (node:internal/deps/undici/undici:1948:17)
    at Object.record<ByteString, ByteString> (node:internal/deps/undici/undici:1858:32)
    at webidl.converters.HeadersInit (node:internal/deps/undici/undici:3397:67)
    at Object.RequestInit (node:internal/deps/undici/undici:1914:21)
    at new Request (node:internal/deps/undici/undici:4821:34)
    at prerenderRoute (/node_modules/@react-router/dev/dist/vite/plugin.js:1227:17)
    at handlePrerender (/node_modules/@react-router/dev/dist/vite/plugin.js:1172:11)
    at Object.handler (/node_modules/@react-router/dev/dist/vite/plugin.js:783:11)
    at async Promise.all (index 0)
    at PluginDriver.hookParallel (/node_modules/rollup/dist/es/shared/node-entry.js:20658:9)

Context:

• The project is using Vite for SSR builds with React Router for routing management.
• The error occurs during the prerendering step of the server-side build.
• The error points to a character at index 79 with a value of 44608, which suggests an issue with non-ASCII characters (likely Korean in this case).

Possible Cause:

• It appears that the issue arises when trying to convert a non-ASCII character (e.g., Korean text) to a ByteString during prerendering in SSR.
• This prevents the server from rendering properly and causes the build to fail.

Expected Behavior

It should build successfully.

Actual Behavior

~/projects/vitejs-vite-p1wvlg 38s
❯ npm run build

> [email protected] build
> react-router build

vite v5.4.9 building for production...
✓ 39 modules transformed.
build/client/.vite/manifest.json                1.05 kB │ gzip:  0.30 kB
build/client/assets/main-CwvjsVEb.js            0.24 kB │ gzip:  0.22 kB
build/client/assets/with-props-DNfIhKtl.js      0.40 kB │ gzip:  0.19 kB
build/client/assets/root-CMrtonkC.js            0.70 kB │ gzip:  0.42 kB
build/client/assets/index-CqM7sw2W.js          99.52 kB │ gzip: 33.13 kB
build/client/assets/entry.client-UGziexu8.js  137.13 kB │ gzip: 44.37 kB
✓ built in 1.58s
vite v5.4.9 building SSR bundle for production...
✓ 8 modules transformed.
build/server/.vite/manifest.json  0.17 kB
build/server/index.js             6.54 kB
Prerender: Generated build/client/_root.data
x Build failed in 513ms
[react-router] Cannot convert argument to a ByteString because the character at index 146 has a value of 44608 which is greater than 255.
    at o.converters.ByteString (node:internal/deps/undici/undici:93:40123)
    at Object.record<ByteString, ByteString> (node:internal/deps/undici/undici:93:38655)
    at n.converters.HeadersInit (node:internal/deps/undici/undici:93:48324)
    at Object.RequestInit (node:internal/deps/undici/undici:93:39529)
    at new Request (node:internal/deps/undici/undici:93:100680)
    at prerenderRoute (/home/projects/vitejs-vite-p1wvlg/node_modules/@react-router/dev/dist/vite/plugin.js:1227:17)
    at handlePrerender (/home/projects/vitejs-vite-p1wvlg/node_modules/@react-router/dev/dist/vite/plugin.js:1172:11)
    at Object.handler (/home/projects/vitejs-vite-p1wvlg/node_modules/@react-router/dev/dist/vite/plugin.js:783:11) {
  code: 'PLUGIN_ERROR',
  plugin: 'react-router',
  hook: 'writeBundle'
}

[saengmotmi]

I found how to fix this problem

[3bdallahz]

How did you fix it @saengmotmi, I facing the same issue

[saengmotmi]

How did you fix it @saengmotmi, I facing the same issue

@abdallahz3 see this https://github.com/remix-run/react-router/pull/12161

[huygn]

Worth noting that this behavior originates from Nodejs and is correct per spec - HTTP header cannot contains non-ascii characters: https://github.com/nodejs/undici/blob/b6d53fe93976b0d7a55438101b3f8c142d37afca/lib/web/fetch/webidl.js#L506

While pending for linked PR to be merged, another possible way to workaround the issue (.eg via patch-package) is to remove X-React-Router-Prerender-Data header in the Vite plugin here:

-          ? { headers: { ...headers, "X-React-Router-Prerender-Data": data } }
+          ? { headers }

Note that this will cause loaders to run twice (during prerendering) as mentioned here https://github.com/remix-run/react-router/blob/dev/packages/react-router/lib/server-runtime/routes.ts#L79-L81

[saengmotmi]

resolved at https://github.com/remix-run/react-router/pull/12161

[github-actions[bot]]

🤖 Hello there,

We just published version 7.0.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions[bot]]

🤖 Hello there,

We just published version 6.28.1-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions[bot]]

🤖 Hello there,

We just published version 6.28.1 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions[bot]]

🤖 Hello there,

We just published version 7.1.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions[bot]]

🤖 Hello there,

We just published version 6.28.2-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!