node.jselectronreact-pdfelectron-react-boilerplate

@react-pdf/renderer only displays pdf on first render


Im currently using react-pdf/renderer and the Electron-React-Boilerplate. If I restart my app, the pdf is generated and visible. If I close the page and reopen it, the location where the pdf is is blank.

enter image description here

const PdfOrcamentoItem = ({ item }: PropsItem) => {
  return (
    <View style={styles.section}>
      <Text>{item.Descricao}</Text>
      {item.FrontImage ? <Image src={item.FrontImage} /> : null}
    </View>
  );
};
export const OrcamentoTest = ({ items }: Props) => {
  return (
    <Document key={items.length}>
      <Page size="A4" style={styles.page}>
        {items.map((item) => (
          <PdfOrcamentoItem item={item} key={item.Ordem} />
        ))}
      </Page>
    </Document>
  );
};
//-------------------------

export function MyPdf({ items }: Props) {
  return (
    <PDFViewer width="100%" height="100%">
      <OrcamentoTest items={items} />
    </PDFViewer>
  );
}
//--------------------------

// how I call the component
<BasicModal
        title="PDF"
        onClose={() => {
          setPdfModalOpen(false);
        }}
        open={pdfModalOpen}
        fullScreen
      >
        {pdfModalOpen ? (
          <MyPdf items={itemsRef.current} />
        ) : null}
      </BasicModal>

Even if I display just a download link for the pdf file instead of trying to display it, it only work on the first render of the component. After that the instance.url becomes null.

function MyPdf({ items }: Props) {
  const test = <OrcamentoTest items={items} />;
  const [instance, updateInstance] = usePDF({ document: test });

  if (instance.loading) return <div>Loading ...</div>;

  if (instance.error) return <div>Something went wrong</div>;

  return instance.url ? (
    <a href={instance.url} download="test.pdf">
      Download
    </a>
  ) : (
    <div>Something went wrong</div>
  );
}


// versions
// "react": "^17.0.1",
// "@react-pdf/renderer": "^2.0.17",

I am starting to think that it might be a webpack configuration, but really have no idea. I have followed the react-pdf instructions and don't see where the problem could be. If someone has any idea that could lead me in the right direction, that would be great. Thanks


Solution

  • I was able to avoid the problem by downgrading my @react-pdf/renderer version to 2.0.16. It was a version bug.

    Github Bug Report