Multiple `toBlob` executed at the same time throws TypeError: Cannot read property 'hasGlyphForCodePoint' of null

OS: Linux manjaro 4.14.67-1-MANJARO

React-pdf version: 1.0.0-alpha.17

Description: I created my custom createPDF function which returns blob instance promise, it works perfectly, but the problem is that if I run multiple calls to this async function, then I sometimes get this error: react-pdf.browser.es.js:3367 Uncaught (in promise) TypeError: Cannot read property ‘hasGlyphForCodePoint’ of null at eval (react-pdf.browser.es.js:3367) at Array.reduce (<anonymous>) at buildSubsetForFont (react-pdf.browser.es.js:3366) at eval (react-pdf.browser.es.js:3376) at Array.map (<anonymous>) at ignoreChars (react-pdf.browser.es.js:3375) at getFragments (react-pdf.browser.es.js:3466) at eval (react-pdf.browser.es.js:3447) at Array.forEach (<anonymous>) at getFragments (react-pdf.browser.es.js:3422)

How to replicate issue including code snippet (if applies): This is how this function looks like:

const MyDocument = ({ children }) => (
  <Document>
    <Page
      size="A4"
      wrap
    >
      <Text
        render={({ pageNumber, totalPages }) => `${pageNumber} z ${totalPages}`}
        fixed
        style={{ position: 'absolute', bottom: 10, right: 10 }}
      />
      {children}
    </Page>
  </Document>
);

export const createPDF = pdfContent => {
  const instance = pdf();
  instance.updateContainer(<MyDocument>{pdfContent}</MyDocument>);
  return instance.toBlob();
};

And this is where I call it:

const {
  createPDF,
} = await import(/* webpackChunkName: "pdf" */ 'pdf');

const blobs = await Promise.all(
  this.props.attachments.map(a =>
    createPDF(a.pdfContent),
  ),
);

Do you have any idea what could cause this error? Is it forbidden to render multiple pdfs at the same time? Does PDF rendering has any side effects or use some global state?

[Plonq]

I’m getting this error with two separate PDFDownloadLink components, so it doesn’t seem to be restricted to PDFViewer. Both by PDFDownloadLink components are rendering different documents with different data. The only shared data is the fonts. EDIT: actually, they also share some styled components using @react-pdf/styled-components, however when not using custom fonts there are no errors.

I’m using v1.5.6

[alundiak]

Not sure how it’s related or is it helpful, but I also have similar behavior (an error as @klis87 mentioned).

TypeError: Cannot read property 'hasGlyphForCodePoint' of null
    at react-pdf.browser.es.js:3777
    at Array.reduce (<anonymous>)
    at buildSubsetForFont (react-pdf.browser.es.js:3776)
    at react-pdf.browser.es.js:3787
    at Array.map (<anonymous>)
    at ignoreChars (react-pdf.browser.es.js:3786)
    at getFragments (react-pdf.browser.es.js:3900)
    at getAttributedString (react-pdf.browser.es.js:3906)
    at Text.layoutText (react-pdf.browser.es.js:3985)
    at Text.measureText (react-pdf.browser.es.js:4012)

I have 3 instances of Components using main REPL code for Quixote https://react-pdf.org/repl

• Download: <QuixoteDownloadLink />
• Viewer: <QuixotePdfViewer />
• Blob: <QuixoteBlobProvider />

My code is simple aggregation and split.

When only Download, or only Viewer or only Blob rendered, all is OK. not errors. When Viewer renedered together with EITEHR Download or Blob, then I have that TypeError in console.

Most probably, @mmichelli is right, that we can’t use Viewer and other instances together.

I also tried both approaches of registering font: old:

Font.register(
    'https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf',
    { family: 'Oswald' },
);

and new:

Font.register({
    family: 'Oswald',
    src: 'https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf'
});

And sure thing, when I comment code related to Font.register I have no TypeError when I render all 3 components (Viewer, Download, Blob).

Note: I created separated issue for the outdated REPL code: #586

@diegomura could you plz confirm, that it was designed so, and if so, plz reflect it in README or doc page and close this issue? Is it an issue at all, or just wrong usage of @react-pdf/renderer API?

PS. I use MacOS v10.14.4, Node v11.14.0, React v16.8.6, Webpack v4.30, Babel v7.4.3, @react-pdf/renderer v1.5.4.