compat with react 19 - Githubissues

joacub commented 4 months ago

React pdf is not compatible with react 19, will you make the library compat with this version ?

joacub commented 4 months ago

👀

ZipBrandon commented 4 months ago

Anything @eps1lon you can suggest? I have been poking around in the react-reconciler but it has drifted and largely undocumented.

eps1lon commented 4 months ago

react-three-fiber also had to update its reconciler implementation. One of the breaking changes that was hard to track down was around commitUpdate which is no longer called with an updatePayload.

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.

ZipBrandon commented 4 months ago

@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 updateContainer call here

joacub commented 4 months ago

Some advances ?

ZipBrandon commented 4 months ago

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 react-18 with "react-18": "npm:react@^18.3.1" in my package.json.

This uses a patch I made with patch-package where the renderer code thenimport React from "react-18".

I had to use the escape hatch of "use no memo" in my components to opt-out the compiler.

I use the pragma /** @jsxImportSource react-18 */ at the top of all files that are associated with the PDF rendering so it goes through the correct createElement().

That being said, this is just duct tape to get by until we have true React 19 compatability.

cipriancaba commented 4 months ago

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

cipriancaba commented 4 months ago

Hi @ZipBrandon , do you mind sharing the patch you used to make this work?

eps1lon commented 4 months ago

I don't see what else we can do. This is just inherent to breaking changes in a library.

What is the suggested path here @eps1lon ?

The suggested path for libraries to ensure compatibility during the alpha period which we announced on the 25th of April. But we also encourage libraries to ensure continuous compatibility by regularly testing Canary.

But we also spent resources at Vercel to ensure the libraries are compatible we use:

or helped these libraries when upgrading:

This is a community effort though so we need all the help we can get

cipriancaba commented 4 months ago

Thanks for the reply @eps1lon and your efforts are obviously much appreciated

I've been tracking your issue here https://github.com/eps1lon/react/issues/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.

ZipBrandon commented 4 months ago

@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:

"react-18": "npm:react@^18.3.1", in your package.json deps.
/** @jsxImportSource react-18 */ at the top of any of your files that are React components that are being rendered in the PDF. You should not have React 19 and React 18 components in the same file.
Import anything you need in those components from React from "react-18" package.
If using the React Compiler, opt-out in the PDF components with "use no memo"

alexandernanberg commented 3 months ago

I've done some investigations and the library is incompatible with react-reconciler 0.27.0 and later (React 19 requires ^0.31.0).

The library expect reconciler.createContainer to mutate the document property of the container.

https://github.com/diegomura/react-pdf/blob/f64f3bd26c9ac1cdb0d894d4621cf2f985c8a64b/packages/renderer/src/index.js#L26-L28

which is then accessed here

https://github.com/diegomura/react-pdf/blob/f64f3bd26c9ac1cdb0d894d4621cf2f985c8a64b/packages/renderer/src/index.js#L37-L38

In 0.27.0 the container.document is always null

I've tried finding workarounds, but I'm not familiar with the internals of the reconciler. @eps1lon thankful for any pointers!

Edit:

~Seems like newer version of the reconciler forces the container to be immutable, or that it clones the object passed into createContainer. The mutation part is done in appendChildToContainer~

https://github.com/diegomura/react-pdf/blob/f64f3bd26c9ac1cdb0d894d4621cf2f985c8a64b/packages/renderer/src/renderer.js#L103-L109

Edit 2:

Okay so looks like updateContainer now schedules an update instead of doing it sync. And library code relies on the sync behavior.

  const updateContainer = (doc, callback) => {
    renderer.updateContainer(doc, mountNode, null, callback);
  };

  if (initialValue) updateContainer(initialValue);

  setTimeout(() => {
    console.log(container);
    // container.document is set now
  }, 0);

alexandernanberg commented 3 months ago

Got it working in #2783.

If you want to try it out early you can:

Install @alexandernanberg/react-pdf-renderer
Replace all references of @react-pdf/renderer with alexandernanberg/react-pdf-renderer

karlhorky commented 3 months ago

@alexandernanberg thanks for this!

Tried @alexandernanberg/react-pdf-renderer out just now and it works in some circumstances!

However, it is hanging with our Express app which uses:

custom fonts (this seems to be the problem)
- Font.register() with src set to an https:// URL of a WOFF font
- StyleSheet.create() with fontFamily set to a custom font which uses Font.register()
(await renderToStream()).pipe(response)

We do also have this pragma, not sure if that's relevant:

/** @jsxRuntime automatic @jsxImportSource react */

alexandernanberg commented 3 months ago

@karlhorky Custom fonts and stylesheets work for me, although I'm using Next.js.

I suspect that I broke something in this commit ed62fa6 (#2783). I'll see if I can revert those changes

karlhorky commented 3 months ago

Custom fonts and stylesheets work for me

Interesting, are you also using the same configuration?

Font.register() with src of:
- https:// URL
- WOFF font
StyleSheet.create() with fontFamily

If you could post an example of your code, then that would be helpful to track down working / not working configurations.

I'll see if I can revert those changes

Thanks!

alexandernanberg commented 3 months ago

Only .ttf fonts are supported AFAIK https://react-pdf.org/fonts

Example

```tsx import { 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(); } export function Certificate() { return ( ); } const styles = StyleSheet.create({ text: { fontFamily: fontFamily.sans, fontWeight: "normal", fontSize: 14, }, }); ```

karlhorky commented 3 months ago

Only .ttf fonts are supported AFAIK

WOFF fonts are also supported, this is just undocumented. I've opened a PR to document that here:

https://github.com/diegomura/react-pdf-site/pull/133

karlhorky commented 3 months ago

Interesting, WOFF is not the problem after all, this .woff font works from Google Fonts (Inter font):

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.

karlhorky commented 3 months ago

Ohh looks like this hanging behavior is a known problem with custom fonts and react-pdf and fontkit (caused by the transitive dependency restructure@3.0.1):

Downgrading to restructure@3.0.0 as mentioned in the issues above resolves the issue.

Thus, I can confirm that @alexandernanberg/react-pdf-renderer@4.0.0-canary-2 is working with React 19. 🙌 🎉

ZipBrandon commented 3 months ago

I'm using it now too! Thanks so much @alexandernanberg!

Timothylp commented 2 months ago

Hello,

while trying with @alexandernanberg/react-pdf-renderer package, I can't get the PDF rendering to work, I still get the following error:

⨯ ..\node_modules\react-reconciler\cjs\react-reconciler.development.js (15700:59) @ module.exports
⨯ TypeError: Cannot read properties of undefined (reading 'S')
    at Results (./app/(frontend)/results/page.tsx:41:107)
digest: "3784830825"
  15698 |         _currentRenderer2: null
  15699 |       },
> 15700 |       prevOnStartTransitionFinish = ReactSharedInternals.S;
        |                                                           ^
  15701 |     ReactSharedInternals.S = function (transition, returnValue) {
  15702 |       "object" === typeof returnValue &&
  15703 |         null !== returnValue &&

Is it maybe because there was an update of the beta version of react 19?

diegomura / react-pdf

compat with react 19 #2756