-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
compat with react 19 #2756
Comments
👀 |
Anything @eps1lon you can suggest? I have been poking around in the |
react-three-fiber also had to update its reconciler implementation. One of the breaking changes that was hard to track down was around Where is the code for the reconciler implementation? Maybe something stands out to me. But no promises for now since we're not using that library at Vercel. |
@eps1lon Here is where @diegomura creates the reconciler. When I updated the deps on my fork, I couldn't get the document to be created from the |
Some advances ? |
FWIW I have patched my version to use React 18. I only use the node version of the renderer so having a version of react@18.3.1 that is only used for that suits my purpose. I'm aliasing This uses a patch I made with patch-package where the renderer code then I had to use the escape hatch of I use the pragma That being said, this is just duct tape to get by until we have true React 19 compatability. |
That's a very interesting aproach @ZipBrandon but I feel like vercel and react will need to come up with a better solution than this since any 3rd party lib you might be using that is not updated will simply prevent you from upgrading to next 15 and react 19. What is the suggested path here @eps1lon ? I've spent the time migrating to next 15, loved the wait everything felt until one of our agents told me the pdf generation page was buggered so had to revert to latest stable next |
Hi @ZipBrandon , do you mind sharing the patch you used to make this work? |
Thanks for the reply @eps1lon and your efforts are obviously much appreciated I've been tracking your issue here eps1lon/react#10 I guess when I meant suggested path I meant more like this is literally a blocker for any kind of upgrade to react 19 / next 15. Is there potential for a more generic temporary fix (maybe similar to what @ZipBrandon suggested) until react 19 is fully adopted by lib authors? In every real life project there's this obscure library that you absolutely have to use and then if that blocks your entire upgrade path, you're basically stuck. |
@cipriancaba Sure! Here's the the gist of the patch for @react-pdf/renderer https://gist.github.com/ZipBrandon/b6c3848a400feff9741d739b7544d4fe. This is only for rendering on the Node side. I didn't do anything for browser rendering. Caveats to remember:
|
I've done some investigations and the library is incompatible with The library expect react-pdf/packages/renderer/src/index.js Lines 26 to 28 in f64f3bd
which is then accessed here react-pdf/packages/renderer/src/index.js Lines 37 to 38 in f64f3bd
In I've tried finding workarounds, but I'm not familiar with the internals of the reconciler. @eps1lon thankful for any pointers! Edit:
react-pdf/packages/renderer/src/renderer.js Lines 103 to 109 in f64f3bd
Edit 2: Okay so looks like const updateContainer = (doc, callback) => {
renderer.updateContainer(doc, mountNode, null, callback);
};
if (initialValue) updateContainer(initialValue);
setTimeout(() => {
console.log(container);
// container.document is set now
}, 0); |
Got it working in #2783. If you want to try it out early you can:
|
@alexandernanberg thanks for this! Tried However, it is hanging with our Express app which uses:
We do also have this pragma, not sure if that's relevant: /** @jsxRuntime automatic @jsxImportSource react */ |
@karlhorky Custom fonts and stylesheets work for me, although I'm using Next.js. I suspect that I broke something in this commit |
Interesting, are you also using the same configuration?
If you could post an example of your code, then that would be helpful to track down working / not working configurations.
Thanks! |
Only Exampleimport {
Document,
Font,
Page,
StyleSheet,
View,
renderToStream,
} from "@alexandernanberg/react-pdf-renderer";
const fontFamily = {
sans: "Inter",
};
Font.register({
family: fontFamily.sans,
fonts: [
{
src: "https://storage.googleapis.com/.../fonts/Inter-Regular.ttf",
fontWeight: "normal",
},
],
});
export function renderCertificate() {
return renderToStream(<Certificate />);
}
export function Certificate() {
return (
<Document>
<Page style={styles.page}>
<View style={styles.container}></View>
</Page>
</Document>
);
}
const styles = StyleSheet.create({
text: {
fontFamily: fontFamily.sans,
fontWeight: "normal",
fontSize: 14,
},
}); |
WOFF fonts are also supported, this is just undocumented. I've opened a PR to document that here: |
Interesting, WOFF is not the problem after all, this Font.register({
family: 'Inter',
format: 'woff',
src: 'https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYAZ9hjp-Ek-_EeA.woff',
}); All fonts on Google Fonts seem to work. It seems to be a problem with my own font files (both TTF and WOFF) being unusable in some way. Maybe something in some dependency is being more strict with certain font files. |
Ohh looks like this hanging behavior is a known problem with custom fonts and react-pdf and fontkit (caused by the transitive dependency
Downgrading to Thus, I can confirm that |
I'm using it now too! Thanks so much @alexandernanberg! |
Hello, while trying with
Is it maybe because there was an update of the beta version of react 19? |
@alexandernanberg can you fix this bugs in your forked repo? https://github.com/diegomura/react-pdf/pull/2878/files |
I've rebased on main and released a new |
Thank you @alexandernanberg , for responding to my request. Now i go back to Next.js 14, which uses React 18. There is so much unsupported libraries in react 19, and your forked repo probably only work on react 18 right?, maybe I'll try it later on Next.js 15! |
@mamlzy I think there are a few misconceptions here:
|
@karlhorky i'm using next 15 app router not pages router so it will uses react 19, am i correct? |
Any update on this? I'm still experiencing this on |
@Jussinevavuori Are you on Next.js 15 and React RC? My guess it's something with multiple or incorrect version of React |
@alexandernanberg My React versions are listed below "dependencies": {
"react": "19.0.0-rc-69d4b800-20241021",
"react-dom": "19.0.0-rc-69d4b800-20241021",
"next": "15.0.1"
},
"devDependencies": {
"@types/react": "npm:types-react@19.0.0-rc.1",
"@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
} |
@alexandernanberg I'm also getting the same error on the same versions of the packages as @Jussinevavuori |
same here |
Same here, on |
Are you rendering the pdf client side? It's working for me server side with Nextjs 15 |
Rendering server side. here is my code. import type { NextRequest } from "next/server";
import { PdfExample, renderToStream } from "@repo/reports";
export async function GET(req: NextRequest) {
const requestUrl = new URL(req.url);
const stream = await renderToStream(
await PdfExample(),
);
const blob = await new Response(stream).blob();
const headers: Record<string, string> = {
"Content-Type": "application/pdf",
"Cache-Control": "no-store, max-age=0",
};
if (!preview) {
headers["Content-Disposition"] =
`attachment; filename="filename.pdf"`;
}
return new Response(blob, { headers });
}
I'm getting this error ypeError: Cannot read properties of undefined (reading 'S')
at module.exports (//.next/server/chunks/08b5e_@alexandernanberg_react-pdf-renderer_lib_react-pdf_1362ba.js:14494:67)
at createRenderer /.next/server/chunks/08b5e_@alexandernanberg_react-pdf-renderer_lib_react-pdf_1362ba.js:14980:12)
at pdf (/.next/server/chunks/08b5e_@alexandernanberg_react-pdf-renderer_lib_react-pdf_1362ba.js:15180:28)
at renderToStream (/.next/server/chunks/08b5e_@alexandernanberg_react-pdf-renderer_lib_react-pdf_1362ba.js:15311:22)
at GET (/.next/server/chunks/[root of the server]__03a291._.js:10336:252)
at async AppRouteRouteModule.do (//next/dist/compiled/next-server/app-route.runtime.dev.js:10:32801)
at async AppRouteRouteModule.handle (/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:10:38302) |
@alexandernanberg any chance you could share your working project's lockfile? I have a suspicion there is some kind of really specific dependency tree required to make this work properly |
I'm able to reproduce the issue outside my actual app https://github.com/alexandernanberg/react-pdf-renderer-nextjs , I'll look into it whenever I get time. Can't make any promises. I can't share the whole lockfile but I'm using pnpm and I've locked the React versions to these + nextjs@15.0.1 catalogs:
react19:
react: 19.0.0-rc-69d4b800-20241021
react-dom: 19.0.0-rc-69d4b800-20241021
'@types/react': npm:types-react@rc
'@types/react-dom': npm:types-react-dom@rc
Tried changing to those in my repro but still got the same issue. We might have to inline to |
AFAICT |
You're right, had a brief experiment keeping it as a dep but removed that later 7c24f14. So digging into this a bit more, There is however |
How are you not getting the:
Typescript error on the blob definition? |
It works at runtime. just add This is due to TypeScript not recognizing BTW, it also works if you @diegopluna read https://midday.ai/updates/invoice-pdf |
Thanks, probabily will downgrade my project to next 14 while this isnt resolved! |
For people using |
@eps1lon AFAICT it's breaking only in Server component and route handlers. E.g. this is working https://github.com/alexandernanberg/react-pdf-renderer-nextjs/blob/main/src/app/page.tsx as expected. Any plans on supporting |
How does this work for a page? Isn't the server use case to just save it as a file i.e. only relevant for API endpoints? There's currently no plan to support Client components in Next.js Route handlers. You can still use |
I think a common use case is to have a route handler generate the PDF and then use https://github.com/wojtekmaj/react-pdf to display it (by just giving it the endpoint URL). That way you don't need to handle the display and download cases differently, it's just a single endpoint that covers everything. Got it. Haven't really looked into it, but does |
React pdf is not compatible with react 19, will you make the library compat with this version ?
The text was updated successfully, but these errors were encountered: