pdf(doc).toBlob() and pdf(doc).toString() always reject with TypeErrors

Describe the bug

Calling pdf(doc).toBlob() and the similar pdf(doc).toString() both result in their promises rejecting with the following error:

TypeError: Cannot read property 'slice' of undefined
    at fetchAssets (webpack-internal:///./node_modules/@react-pdf/layout/lib/steps/resolveAssets.js:28:39)
    at eval (webpack-internal:///./node_modules/ramda/es/internal/_pipe.js:5:27)
    at eval (webpack-internal:///./node_modules/ramda/es/internal/_pipe.js:5:27)
    at eval (webpack-internal:///./node_modules/ramda/es/internal/_arity.js:16:19)
    at resolveAssets (webpack-internal:///./node_modules/@react-pdf/layout/lib/steps/resolveAssets.js:69:111)
    at eval (webpack-internal:///./node_modules/@react-pdf/layout/lib/utils/asyncCompose.js:23:20)

In addition, the TypeScript type for toString() claims to return a string, then at runtime it actually returns a Promise. I can’t get the Promise to resolve due to the above error, but it’s likely the intended type is Promise<string>.

Note: Attempting to build the same PDF documents using <BlobProvider> or <PDFDownloadLink> components do work as expected. They even pass a blob prop back meaning Blobs can be built in browser. It just seems that these two methods I’ve identified are broken.

To Reproduce

Using the code in the react-pdf.org docs online here, we can see the example is busted. Run it in browser (with React and all that jazz hooked up):

import { pdf, Document, Page, Text } from '@react-pdf/renderer';

const MyDoc = (
  <Document>
    <Page>
      <Text>This is the PDF document. Hello!</Text>
    </Page>
  </Document>
);

const blobPromise = pdf(MyDoc).toBlob();
// this promise reject with the following error:
// TypeError: Cannot read property 'slice' of undefined
// .toString() has the same error when rejected. Probably the same bug.

In addition, I’ve included a Gist repo that reproduced the error with all the React and other libraries you’d expect around this code:

https://github.com/JacobFischer/react-pdf-toBlob-bug

It also shows the same PDF being built correctly using <BlobProvider> and <PDFDownloadLink> components.

Expected behavior

pdf(doc).toBlob() should resolve to a Blob. pdf(doc).toString() should resolve to a String.

Desktop

• OS: Mac and Windows
• Browser: Chrome
• React-pdf version: 2.0.0-beta.14

[JacobFischer]

Upon digging within <BlobProvider> I’ve found how it works and reverse engineered a workaround:

const myPdf = pdf({}); // important, without an argument it blows up
myPdf.updateContainer(MyDoc);
const blob = await myPdf.toBlob(); // now works!

I’m still having some other issues with my actual PDFs that I’m unsure if they are related to my workaround, or legitimate additional non-related bugs.

[thatgriffith]

Upon digging within <BlobProvider> I’ve found how it works and reverse engineered a workaround:

const myPdf = pdf({}); // important, without an argument it blows up
myPdf.updateContainer(MyDoc);
const blob = await myPdf.toBlob(); // now works!

I’m still having some other issues with my actual PDFs that I’m unsure if they are related to my workaround, or legitimate additional non-related bugs.

Thanks @JacobFischer ! your solution worked for me