[2.0]: 🐛 Hot/live reloading no longer working?

[luskin]

Describe the bug Hot/live reloading doesn't appear to be working in v2.0. For example, setup an extremely simple PDFViewer:

export const App = (): JSX.Element => {
  return (
      <PDFViewer style={{ width: '100vw', height: '100vh', padding: 0, margin: 0 }}>
        <Document>
          <Page size="A4" style={styles.page}>
            <Text>Test</Text>
          </Page>
        </Document>
      </PDFViewer>
  )
}

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

1. Run the most simple PDF you can
2. Alter the text from Test to anything else...
3. The page appears to update but the new text is not reloaded
4. This used to work in the v1.X versions of this package

Desktop (please complete the following information):

• OS: MacOS
• Browser: chrome
• React-pdf version: v2.0.14

[diegomura]

Hey @luskin !

Alter the text from Test to anything else...

You mean making Text a state value and updating it real time? Or just alter Text on your code editor?

[luskin]

Altering the value of the <Text> string children, i.e. <Text>Initial Text</Text> -> <Text>New Text</Text>

[luskin]

To be clear, it's not just text, it's making any change anywhere inside the PDF generation React code... nothing triggers a re-render.

[diegomura]

I'm not sure exactly if this is something related to react-pdf to be honest 🤔 Hot-reloading is not something this lib offers, rather than something your projects has configured, and that depends directly from what bundler or app type you are running. For ex. I have a create-react-app project for dev purposes where hot-reloading is working fine. If you can provide a way to replicate it I'll try to take a look, but I don't think this qualifies as a bug

[luskin]

That's a fair point @diegomura, it's a standard create-react-app project on our end as well so not sure where the problem exists. I'll work to getting this replicated in a project. What's weird is everything outside of react-pdf hot-reloads just fine, the only thing in the entire application that doesn't trigger a reload is anything within the PDF Rendered.

[einarpersson]

Same problem here! I've also used create-react-app and have to refresh manually. Let me know if you figure it out!

[sandren]

I'm encountering this issue with Gatsby as well.

[DavidLemayian]

I'm experiencing this when <Document/> lives in a separate file from the renderer

[process0]

Experiencing this as well. @diegomura any tips on debugging this?

[joacub]

any solution ?

[joacub]

there is not changes on this, is been difficult to make changes

[joacub]

i have debuged this and found the issue, react-fast-refresh does not detect any compatible refresher and therefore is trigerring a full reload as a fallback but this full refresh have exactly the same components as the components updates are not compatible with and nothing is being refreshed.

This is a concept issue and have pretty dificult solution or at least i dont see any solution, as the reconcilier that react pdf should implement a refresher that only update the component that it is updated and this is not what this tool is doing today.

if you use the Whole Document in the same page all will work as react-refresh detects the changes in the parent and the renderer and will change everything but when is in the childs this will not work as this childs has no compatible renderer as i said already.

If the primitives changes to something that react udnerstand this i think will work.

[joacub]

this is an example why this was working before:

https://github.com/diegomura/react-pdf/blob/v1.6.17/src/elements/View.js

in thatcode all elements have a render lifecicle so this will called everytime that react-refresh call this and the component is a regular react component that makes all the logic whe ncalled on new changes.

[joacub]

is there any plan in having this working again or changing the lifecycle of the Primitives components. or making them as a normal components so the render can be called ??