React-pdf: ReactPDF.render is not a function

[luskin]

OS: Mac OS X High Sierra

React-pdf version: ^1.0.0-alpha.18

Description: ReactPDF.render does not work and crashes the application

index.js

import React from 'react'
import Test from 'templates/Test'
import ReactPDF from '@react-pdf/renderer'

ReactPDF.render(<Test />, './example.pdf')

templates/Test/index.js (copied from README):

import React from 'react'
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'

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

// Create Document Component
const MyDocument = () => (
  <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 MyDocument

ERROR WHEN RUNNING:

TypeError: _react_pdf_renderer__WEBPACK_IMPORTED_MODULE_4__.default.render is not a function
Module../src/index.js
src/index.js:9
>  9 | ReactPDF.render(<Test />, './example.pdf')

[suenwl]

I'm still experiencing this issue. Any way to get around this?

[fang0rnz]

same problem here @suenwl

[fang0rnz]

Are you using electron? I found out that you need to import the renderer in node.js context instead of DOM context. I changed all my imports to window.require and now it works fine.

[ewolfe]

Same problem, not using electron. Literally just copy/pasted from the README as this is my first time using this project.

[diegomura]

Just bare in mind that ReactPDF.render() is a Node-only API to save pdfs in disk. If you are using this lib in a web environment (such as electron) this method won't be available and that's probably what's causing these issues

[ewolfe]

Got it. Might be worth making a note of that in the README. I was assuming the browser would've created a PDF file (via a blob) and immediately downloaded it.

[xwilluhn]

agree. should have a note in README saying ReactPDF.render() is a Node-only API

[diegomura]

It is under the title “render In node”. I’ll try to be more explicit about it

[xwilluhn]

Thanks. Do you have any suggestion what should I use for pure frontend PDF
render?
Xia

On Mon, Nov 26, 2018, 16:56 Diego Muracciole <[email protected]
wrote:

It is under the title “render In node”. I’ll try to be more explicit about
it

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/diegomura/react-pdf/issues/341#issuecomment-441690379,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHcjSgBuDwDe9nYWuaMM1hbdl7BLwk-Qks5uzA8ggaJpZM4Xc91B
.

[AirborneEagle]

I am simply trying to generate a pdf on a button click in the UI. I am getting this exact same error.

[goodspeed666]

Hi @diegomura ,

Could you tell me how to save pdf file under Web mode ?
I use ReactPDF.render got the same error.
And I cannot recognize the Web or Node mode.
Is the Node mode only for command line ?

Thank you.

[diegomura]

Hi. There isn’t a node or web mode. It’s just about in which envorinment are you using this lib (web or “server”).

To download documents in the browser please check PDFDownloadLink on the docs

[goodspeed666]

Hi @diegomura ,

Thank you for your detailed response.
I will try it 👍

[goodspeed666]

Hi @diegomura ,

It's done for the web.
May I know react-pdf could be use with the cordova ?

Thank you.

[anisg]

If like me you just want to have a simple function to download a pdf Document through the web, you can do:

import { pdf } from '@react-pdf/renderer';

const saveBlob = (blob, filename) => {
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style.display = "none";
  let url = window.URL.createObjectURL(blob);
  a.href = url;
  a.download = filename;
  a.click();
  window.URL.revokeObjectURL(url);
};

export const savePdf = async (document, filename) => {
  saveBlob(await pdf(document).toBlob(), filename);
};

then in your React code:
``jsx savePdf(<MyDocument/>, "my-document.pdf") ```` note that the functionsavePdfis asynchrone (you may need to useawait` if you want to execute code after download)

[mateo2181]

@anisg what version are you using? I've tried this but I get error Type mismatch.

[anisg]

@mateo2181 , my version of "@react-pdf/renderer" is "1.6.8"