React-pdf: Clarifying question: Can I render a PDF in browser yet?

[flaurida]

Super excited about this project - is it possible to render the PDF in the browser yet? I can't tell from the README. Thanks!

Sincerely,
Laura

[diegomura]

Hi! Thanks for show interest in the project.
Yes, it's technically possible. Check out: https://github.com/diegomura/react-pdf/tree/master/examples/dom-bindings

There are things to polish however (bundle size, for instance) but you should be able to run that project without any problem.

If something appears, please submit the result here and we can discuss it. For the moment, I'll close this issue.

[flaurida]

Thanks so much for the quick response! I think I am close, except for that I keep getting this error:

Uncaught (in promise) TypeError: fs.readFileSync is not a function
    at Object.<anonymous> (index.js:10)
    at Object.../node_modules/unicode-properties/index.js (index.js:142)
    at __webpack_require__ (bootstrap f94d1a5d8f7f8b9ac8af:712)
    at fn (bootstrap f94d1a5d8f7f8b9ac8af:117)
    at Object.<anonymous> (index.js:24)
    at Object.../node_modules/fontkit/index.js (index.js:14919)
    at __webpack_require__ (bootstrap f94d1a5d8f7f8b9ac8af:712)
    at fn (bootstrap f94d1a5d8f7f8b9ac8af:117)
    at Object.<anonymous> (font.js:5)
    at Object.<anonymous> (font.js:75)

I added

    fs: 'empty',
    net: 'empty',
    tls: 'empty',

to node in my webpack config file. Any ideas for what it could be?

Sincerely,
Laura

[diegomura]

Maybe is because of this fix: https://github.com/diegomura/react-pdf/blob/master/examples/dom-bindings/webpack.config.js#L19

For the moment at least, you need to define the transform-loader to process some dependencies

[flaurida]

Yes, I am including the following in my webpack as well

{
  test: /(pdfkit|linebreak|fontkit|unicode|brotli|png-js).*\.js$/,
  loader: "transform-loader?brfs"
}

Would I need to do something else? Thanks again!

[diegomura]

No. That should be all. Can you please check if the dom-bindings project runs well for you?

[flaurida]

Hi Diego,

Yes, the project runs well for me! I now just need to somehow port that over to my own project.

Sincerely,
Laura

[diegomura]

🤔 very interesting. please check that you are running the lastest version of react-pdf, and that you are using the dom bindings of it.
otherwise I'm not sure how I can help you. I can review the code if you give me access when I have some time haha

[flaurida]

What exactly do you mean by using the dom bindings? Just want to make sure I do what I can, thanks again! Have a nice weekend 😊

[diegomura]

That you are installing @react-pdf/dom as well with @react-pdf/core`
Have a nice weekend also and ping me in case I can help you on setting up your project!

[flaurida]

Oh, I was not installing @react-pdf/dom, do I import that as well, or just install? Thanks again!! I may take you up on that offer ;)

In addition, here is the error I get, but if I remove unicode from the loader in webpack this error goes away

ERROR in ./node_modules/lodash-es/_unicodeWords.js Module build failed: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (69:0) at Parser.pp$4.raise (/Users/lauracressman/Desktop/src/commons/node_modules/acorn/dist/acorn.js:2649:13) at Parser.pp$1.parseStatement (/Users/lauracressman/Desktop/src/commons/node_modules/acorn/dist/acorn.js:783:16) at Parser.pp$1.parseTopLevel (/Users/lauracressman/Desktop/src/commons/node_modules/acorn/dist/acorn.js:690:23) at Parser.parse (/Users/lauracressman/Desktop/src/commons/node_modules/acorn/dist/acorn.js:543:15) at parse (/Users/lauracressman/Desktop/src/commons/node_modules/acorn/dist/acorn.js:3708:37) at module.exports (/Users/lauracressman/Desktop/src/commons/node_modules/falafel/index.js:22:15) at /Users/lauracressman/Desktop/src/commons/node_modules/static-module/index.js:30:13 at ConcatStream.<anonymous> (/Users/lauracressman/Desktop/src/commons/node_modules/concat-stream/index.js:36:43) at emitNone (events.js:111:20) at ConcatStream.emit (events.js:208:7) at finishMaybe (/Users/lauracressman/Desktop/src/commons/node_modules/readable-stream/lib/_stream_writable.js:607:14) at endWritable (/Users/lauracressman/Desktop/src/commons/node_modules/readable-stream/lib/_stream_writable.js:615:3) at ConcatStream.Writable.end (/Users/lauracressman/Desktop/src/commons/node_modules/readable-stream/lib/_stream_writable.js:571:41) at DuplexWrapper.<anonymous> (/Users/lauracressman/Desktop/src/commons/node_modules/duplexer2/index.js:31:14) at Object.onceWrapper (events.js:313:30) at emitNone (events.js:106:13) @ ./node_modules/lodash-es/words.js 4:0-46 @ ./node_modules/lodash-es/string.default.js @ ./node_modules/lodash-es/string.js @ ./node_modules/lodash-es/lodash.default.js @ ./node_modules/lodash-es/lodash.js @ ./app/store.ts @ ./app/client.tsx @ multi react-hot-loader/patch webpack-hot-middleware/client ./client.tsx

[diegomura]

You should install @react-pdf/dom to use it on the web! Please review how that's done in the example and maybe you will fix your build issues.

Oh. I never saw that error before. I would recommend setting up everything just like the example

[flaurida]

Yes, I installed it now, but am still seeing the issue about index.js:10 Uncaught (in promise) TypeError: fs.readFileSync is not a function. I will keep playing with it, thank you again for your help.

[flaurida]

Hi Diego,

I tried installing again from scratch using exactly the example steps and copying the example files into my project, and am still encountering the following error:

index.js:10 Uncaught (in promise) TypeError: fs.readFileSync is not a function
    at Object.<anonymous> (index.js:10)
    at Object.../node_modules/unicode-properties/index.js (index.js:142)
    at __webpack_require__ (bootstrap d09f1a9d261362e33cc9:712)
    at fn (bootstrap d09f1a9d261362e33cc9:117)
    at Object.<anonymous> (index.js:24)
    at Object.../node_modules/fontkit/index.js (index.js:14919)
    at __webpack_require__ (bootstrap d09f1a9d261362e33cc9:712)
    at fn (bootstrap d09f1a9d261362e33cc9:117)
    at Object.<anonymous> (font.js:5)
    at Object.<anonymous> (font.js:75)

Any ideas? I don't know if It has to do with unicode-properties or fontkit. Thanks again! 😊

[flaurida]

I think it may also have to do with conflicting somehow with lodash unicode methods, because if I don't remove unicode from the webpack rule, then I get the following error:

ERROR in ./node_modules/lodash-es/_unicodeWords.js
Module build failed: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (69:0)

Perhaps there is a different regex in the rule that would still load the relevant files but not mess with lodash? Thanks again!

Sincerely,
Laura

[flaurida]

Another update! Using the following rule in webpack works for me, as it does not match other files with the word unicode:

{
  test: /(pdfkit|linebreak|fontkit|unicode-properties|brotli|png-js).*\.js$/,
  loader: 'transform-loader?brfs',
}

Now I am getting close! I am now seeing just a square empty box, with the console warning:

Resource interpreted as Document but transferred with MIME type application/pdf: "blob:http://localhost:3000/ac4217b5-1dd1-4cc7-87d5-37a666d47cc7".

Any ideas? Thanks so much again! 🎉

[diegomura]

Are you using an iframe just like the example? It’s hard to know why you are getting that without seeing the code. It seems you are trying to download the document somehow but not sure

[flaurida]

Yes, the iframe is being used in the DOM. I tried to follow the example as closely as possible. After restarting chrome, the PDF seems to work. Hope it stays that way! Thanks again!

[diegomura]

Awesome! Thanks

[flaurida]

Last question - is it possible to directly link to the .pdf file? For example, if we wanted to have a button to secure fax a PDF made with react-pdf? Thanks so much again!

[diegomura]

Not sure what you meant. Like pointing to a pdf file? (ex. http://myserver.com/file.pdf?)
React-pdf just handles the creation of the file. If you then want to reference it in some way like that, or you will have to save the file on your server and generate the url, or to expect that url and create the document each time

[flaurida]

Yes, is it possible to render the PDF on the server is my question. Sorry for the confusion!

[diegomura]

Yes it is! You need to use the @react-pdf/node bindings for that. You will find any of the examples useful. You can save the file, or create a buffer that you can then use in your response.

[flaurida]

Cool, so I can send the generated PDF as the response??

[diegomura]

You should be able to do it, yes. As you would do with any other type of file (images, etc)

[flaurida]

thanks!!!

[flaurida]

Is there an example of creating a buffer somewhere? If not, no worries!

[diegomura]

You can do

import ReactPDF from '@react-pdf/node`;

const buffer = ReactPDF.renderToStream(doc);

That should return the buffer you want

[flaurida]

thanks so much Diego 🎉 😄

[flaurida]

import { Document, Page, StyleSheet, Text, View } from '@react-pdf/core';
import ReactPDF from '@react-pdf/node';
import React from 'react';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

// Create Document Component
const MyDocument: React.StatelessComponent<{}> = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

export default function renderPDF(req: any, res: any) {
  console.log(req.query);
  const buffer = ReactPDF.renderToStream(<MyDocument />);
  console.log(buffer);
  res.
  return res.status(200).send({ hello: 'laura' });
}

[flaurida]

Hi Diego, I thought this would work? However, I am getting the error: TypeError: Cannot read property 'createElement' of undefined. Is there somewhere else I need to import React to make it work?

[flaurida]

Never mind, fixed it. Feel very close! Just how do I send it with express is the final piece:

export default async function renderPDF(req: any, res: any) {
  const buffer = await ReactPDF.renderToStream(<MyDocument />);

  res.contentType('application/pdf');
  return res.status(200).send(buffer);
}

Thank you SO MUCH again for your patience.

[flaurida]

Note that it does not appear the result of renderToStream is a buffer

  const buffer = await ReactPDF.renderToStream(<MyDocument />);
  console.log(Buffer.isBuffer(buffer)); // false

[flaurida]

Note, there are also circular references in the returned stream, which causes the following error:
(node:1569) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Converting circular structure to JSON

[diegomura]

About the isBuffer, I will have to see why that's happening. But it's actually a buffer right?
I'm doing some test on the code I share to you and I didn't have any error like the one you shared. Is it too much to ask if you can build an code snippet where if fails and share it?

[stevenquiroa]

I had the same issue as @flaurida, but I found this workaround that works for me in the meantime:

const makePDFHandler = async (req, res) => {
  const doc = path.resolve('build', 'pdf', 'generated.pdf');
  await ReactPDF.render(<MyDocument />, doc);
  res.status(200).download(doc, 'propiedad.pdf');
};

[rogierslag]

We built a custom react-pdf server based on this repo. It’s humming in production by now and generating thousands of files per day :)

I dont think it is exactly what you need, but the code might help you how to tackle the dynamic generation using express: https://github.com/inventid/pedeffy/blob/master/src/index.js

[lalithnarayan]

I followed the instructions given in the doc and I get this error. unable to fix it.
@flaurida is there a work around for this?

ERROR in ./node_modules/fontkit/src/WOFFFont.js
Module build failed: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
    at Parser.pp$4.raise (/OrangeSelfStorage/Customer_Portal/UI/node_modules/falafel/node_modules/acorn/dist/acorn.js:2610:13)
    at Parser.pp$1.parseStatement (/OrangeSelfStorage/Customer_Portal/UI/node_modules/falafel/node_modules/acorn/dist/acorn.js:782:16)
    at Parser.pp$1.parseTopLevel (/OrangeSelfStorage/Customer_Portal/UI/node_modules/falafel/node_modules/acorn/dist/acorn.js:690:23)
    at Parser.parse (/OrangeSelfStorage/Customer_Portal/UI/node_modules/falafel/node_modules/acorn/dist/acorn.js:543:15)
    at parse (/OrangeSelfStorage/Customer_Portal/UI/node_modules/falafel/node_modules/acorn/dist/acorn.js:3669:37)
    at module.exports (/OrangeSelfStorage/Customer_Portal/UI/node_modules/falafel/index.js:22:15)
    at /OrangeSelfStorage/Customer_Portal/UI/node_modules/static-module/index.js:57:13
    at ConcatStream.<anonymous> (/OrangeSelfStorage/Customer_Portal/UI/node_modules/static-module/node_modules/concat-stream/index.js:37:43)
    at ConcatStream.emit (events.js:187:15)
    at finishMaybe (/OrangeSelfStorage/Customer_Portal/UI/node_modules/static-module/node_modules/concat-stream/node_modules/readable-stream/lib/_stream_writable.js:607:14)
    at endWritable (/OrangeSelfStorage/Customer_Portal/UI/node_modules/static-module/node_modules/concat-stream/node_modules/readable-stream/lib/_stream_writable.js:615:3)
    at ConcatStream.Writable.end (/OrangeSelfStorage/Customer_Portal/UI/node_modules/static-module/node_modules/concat-stream/node_modules/readable-stream/lib/_stream_writable.js:571:41)
    at DuplexWrapper.<anonymous> (/OrangeSelfStorage/Customer_Portal/UI/node_modules/duplexer2/index.js:29:14)
    at Object.onceWrapper (events.js:275:13)
    at DuplexWrapper.emit (events.js:182:13)
    at finishMaybe (/OrangeSelfStorage/Customer_Portal/UI/node_modules/readable-stream/lib/_stream_writable.js:607:14)
    at afterWrite (/OrangeSelfStorage/Customer_Portal/UI/node_modules/readable-stream/lib/_stream_writable.js:470:3)
    at onwrite (/OrangeSelfStorage/Customer_Portal/UI/node_modules/readable-stream/lib/_stream_writable.js:461:7)
    at WritableState.onwrite (/OrangeSelfStorage/Customer_Portal/UI/node_modules/readable-stream/lib/_stream_writable.js:169:5)
    at afterWrite (/OrangeSelfStorage/Customer_Portal/UI/node_modules/static-module/node_modules/concat-stream/node_modules/readable-stream/lib/_stream_writable.js:469:3)
    at process._tickCallback (internal/process/next_tick.js:174:19)
 @ ./node_modules/fontkit/src/index.js 3:0-34

[rogierslag]

Its a different error which seems like your node environment is either outdated or not properly configured

[lalithnarayan]

@rogierslag thanks for the reply.

192:UI lalithnarayankashyap$ node -v
v10.0.0
192:UI lalithnarayankashyap$ npm -v
5.6.0
"react": "^16.3.2",

I'm on the latest versions of node and npm. can you let me know what kind config errors could cause such an issue

[rogierslag]

Are you happening to build using browserify? Then this link might be of use

[lalithnarayan]

@rogierslag I'm using webpack. https://github.com/react-boilerplate/react-boilerplate i'm building my app over this boilerplate

[danielmorlock]

@rogierslag any updates here? I'm getting the same error when using webpack.