React-pdf: It can not run in next.js

[MinJieLiu]

It can not run in next.js

Error: fs net tls not installed.

It also can not run in create-react-app:

Error: Uncaught ReferenceError: _regeneratorRuntime is not defined

I have used babel-polyfill

[jbovenschen]

I will improve on our side how we bundle our stuff, this is an issue we know about. If you are interested in helping us on this particular issue your welcome.

The idea is to do the babel transpilation trough babel-preset-env and babel-runtime, like the way create-react-app does it internally.

[ivosabev]

Can't make it work even with import 'babel-polyfill';.

[IngenieroLata]

I tried to use the babel-preset-env but haven't been able to run the examples either.

    throw new Error('SOI not found in JPEG');
    ^
Error: SOI not found in JPEG

Maybe I'm missing something?

Also I was trying to update the dependencies and found the 'react-dom/lib/ReactFiberReconciler' got deprecated on react16 beta. You can check more here. So dunno if someone is updating the renderer.js

[diegomura]

About this subject, how is supposed to work anyway?
I see two scenarios:

• Just to render documents client side: I think this works from out of the box with the new @react-pdf/renderer package. If not, you can always import it dynamically with ssr=false. I know this because I'm building the landing page in next, and was very easy to set it up.
• Render document server side when server request (send it with page somehow?), and client-side when client-side redirection: This would be a bit harder. Even though I improved how the library is bundled, this is not yet possible. BUT: does it really worth it? I mean, creating PDF on the fly sever side can take lots of resources. I think that if you really need documents rendered server side it can easily done with this lib and express (for example)

Would love to hear more thoughts about this!

[diegomura]

New site is built with next, and the library worked without any issue.
Two thing to consider though:

• PDF will always be rendered clientside. It's outside the project scope to have isomorphism also over the pdf generation
• Site loads some dependencies dynamically on next, but that's because some dependencies needed for the REPL, but not the renderer itself

[vilvadot]

Anywhere I could see the code @diegomura? trying to integrate the PDF viewer into a next.js project but Im having problems.

Crashes when rendering server-side because the PDFViewer is supposed to be used client-side I guess.

Also the styled-components styling approach is crashing (I think desync between server/clientside).

Any workarounds around this? Thanks

[diegomura]

Here's the code of the site: https://github.com/react-pdf/site