react-pdf: ReactPDF.render is not a function

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')

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 10
Comments: 19 (3 by maintainers)

Most upvoted comments

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:

savePdf(<MyDocument/>, "my-document.pdf")

note that the function savePdf is asynchrone (you may need to use await if you want to execute code after download)

+37

anisg on Mar 16, 2020

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

diegomura on Nov 13, 2018

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 <notifications@github.com 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 .

xwilluhn on Nov 26, 2018

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

anisg on Jul 6, 2020

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

diegomura on Mar 14, 2019

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

diegomura on Nov 26, 2018

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

AirborneEagle on Nov 26, 2018