Documentation: starting from create-react-app

Hey all,

I’m trying to get up and running with react-pdf starting with create-react-app and I have reached a limit in my understanding of how packages like this work.

This is my index.js file

import React from "react";
import ReactDOM from "react-dom";
import ReactPDF, { PDFViewer } from "@react-pdf/renderer";

import { MyDocument } from "./sections/Test";

// ReactPDF.render(<MyDocument />, `${__dirname}/test.pdf`); // I have to uncomment this line

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

ReactDOM.render(<App />, document.getElementById("root"));

Now, I am trying to render PDF previews in the browser so I can render-on-save (for productivity) and then finally build a PDF as part of my npm run build script. This is my understanding of how react-pdf can be put to work.

The above shows the PDF in the PDF Viewer, but only after removing the build line due to error

TypeError: undefined is not a function (near '..._react_pdf_renderer__WEBPACK_IMPORTED_MODULE_2__["default"].renderToFile...')

So, I am sure that my setup is wrong, but I haven’t been able to find documentation as to how to get this render function to work in Node. When I put the function in its own file and try to run it with Node I predictably get an error due to not first using Babel or whatever to compile everything over.

So I am requesting an addendum to the docs that assume the user has no knowledge of React outside of Create React App to get started building PDFs with react-pdf.

Also, I’m on LTS 8, I have no idea if that matters. I can’t find anything in this repo stating what version of Node is to be used. Cheers!

[lukepighetti]

For others who want to use react-pdf but have never had to setup a React environment from scratch before, you can use these instructions.

Install babel and a couple presets

npm i -D babel-cli babel-preset-react babel-preset-env

Add this .babelrc file to project directory

{
  "presets": ["env", "react"]
}

Add this to your package.json scripts

    "compile": "babel-node src/render.js"

This assumes a render.js containing the following

import React from "react";
import ReactPDF from "@react-pdf/renderer";
import { MyDocument } from "MyDocument";

ReactPDF.render(<MyDocument />,`${__dirname}/test.pdf`);

[atherdon]

this package have an old version of babel core

https://github.com/diegomura/react-pdf/blob/master/package.json#L55-L65