Open pauldvu opened 3 months ago
react renamed their symbol for elements, https://github.com/facebook/react/pull/28813
bun's own transform for JSX does inlining in production:
it seems for react 19 we will need to update or disable this
Ah that makes more sense , so this change was causing Bun not to tag element's correctly?
Thanks paperdave!
Hello, is there any update on this? I can replicate it on v1.1.21. Thanks!
I thought we had disabled the inlining but I guess we didn’t
I do not think so, but I could be wrong!
Is there anything I can do to help this along - digging into Bun internals might be a bit tricky for me but I'm willing to give it a shot!
I encounter following error in nextjs. Same conditions, works in dev and fails in prod. Is it relevant here?
Component with strange name is actually called ClientsFilter
error: Could not find the module "...\src\app\(main)\base\\u0421lientsFilter.tsx#default" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
Hello! Not sure if you have time to take a look at this @paperdave?
What version of Bun is running?
1.1.8
What platform is your computer?
Darwin 23.4.0 arm64 arm
What steps can reproduce the bug?
await renderToReadableStream(element, { signal: request.signal, bootstrapScriptContent: [
_INIT_PATH=${JSON.stringify(pathname)}
,_ROUTES=${JSON.stringify(routes)}
,_PROPS=${JSON.stringify(props)}
].filter(Boolean).join(";"), bootstrapModules: [${routes["/hydrate"]}
], identifierPrefix: "app", });How to recreate the error
What is the expected behavior?
The expected behavior is that in production mode , the react 19 application would successfully render with bun renderToReadableStream
What do you see instead?
Instead in production the hydration will fail
Additional information
One way to get the code working is to moneky patch the following code out
react-dom-server.bun.production.js
however by doing so styles will not load correctly when passing a style from the server
I got around this by passing the styles as a prop and using the
tag in the component itself. Typically ``` {/* */} ``` would work in development mode