React-pdf: Documentation: starting from create-react-app

[lukepighetti]

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]

tried to install babel-node and I'm getting nowhere.

// .babelrc
{
  "presets": [
    [
      "@babel/preset-react",
      {
        "pragma": "dom", 
        "pragmaFrag": "DomFrag",
        "throwIfNamespace": false 
      }
    ]
  ]
}

// package.json snippet
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "pdf": "babel-node ./src/render.js"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/node": "^7.0.0",
    "@babel/preset-react": "^7.0.0"
  }

[diegomura]

Hey.
I am a bit confusing about what you want to achieve in the first place. Based on what you said, you're trying to render a PDF on a Node environment isn't it? If that's so, why are you using create-react-app??

This line ReactPDF.render(<MyDocument />,${__dirname}/test.pdf); is just for rendering a document into the file system, so it's a Node specific API. You obviously cannot do this on a web environment such as the one that create-react-app creates.

I conclusion, I think you're trying to create PDF files in the file-system using a web project. It's that the case, forget about create-react-app, just create a .js file, install react and @react-pdf/renderer and run the script by calling node ./index.js. You can check out the examples for that.

Anyways, you definitely need to have some knowledge of React and Node to use this library. That's not too much to ask. What you are _requesting_ it's not possible. Even though I have to say, _requesting_ something in open-source is truly not the way of getting things done. You can ask nicely, or do it yourself. We all put too much time on this to being "requested" to do more things 😄

[lukepighetti]

Hi, sorry about the confusion, I probably could have done a better job of explaining myself.

1) I use CRA. That's my starting point. From what I gather, it is the starting point for a lot of people who use React on a daily basis.

2) I am using CRA as a way to render PDF to browser on save so I don't have to build the PDF and load it every time I make a change. I believe this is acceptable.

3) I am trying to use Node to do the final PDF build process, but I don't see anywhere in the docs that describe setting up babel to do the build process. When I follow the example I get an error that the JSX tag is not valid syntax. I know I'm missing something that isn't documented and I don't know what it is.

4) It has been my experience that requests for more documentation isn't really a traditional "issue" since nothing is technically wrong so I framed it as a request for more documentation, and then tried to explain where I was personally stumbling with the existing documentation to try to make it easier to see where the docs might be lacking for a new user to reduce any contributor's head-scratching who decided to invest in more documentation.

I do not feel any sort of entitlement to your time, on the contrary, I recognize that maintaining an open-source package is a thankless job so I requested additional documentation, provided as much detail as I could, did not frame it as an issue, and with a small seed of optimism hoped that someone would be willing to flesh out the docs enough that I, and perhaps others, could adopt this package more easily.

Also, my apologies if my issue was offensive. I would really like to use this package but the examples don't work with a fresh Node project. I think babel needs to be setup for it to work but I don't see any examples of how to do that for this project.

[diegomura]

Ok. So what you really want is to generate docs on the browser.
Putting this lib aside for one moment, if you’re getting syntax errors on JSX your issue has nothing to do with react-pdf. If that’s really your case, you are not even being able to render web components either. It’s odd you’re having that issue, since create-react-app comes with all needs pre configuration from out of the box.
Again, it does not make much sense for libraries docs to explain things such as Babel or other concepts that you should know before even working with React. I apologize, but that’s truly not the way to go. If that would be the case, all React libraries should have it. And that’s not the case. And it’s good it’s not haha.
If you can’t deal with the Babel issue I recommend you to open an issue in the create-react-app repo, but for the info I have, your issue has nothing to do with this project

[lukepighetti]

I feel like I am still having trouble communicating what I'm asking. I apologize if I am not being clear!

I am trying to generate PDFs on a fresh Node project with react-pdf. When I follow the directions verbatim I get an error that < is not recognized syntax, and it points to the JSX tag in the line below.

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

1) Is there documentation available that shows how to get this to run?
2) If not, can someone please add it so that I and others can benefit?
3) If not, can someone please give me an idea of what steps need to be taken to get this to work so that I can make a pull request to update the documentation?

Thank you for your time.

[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]

@lukepighetti is this covering babel v7?

[lukepighetti]

I honestly can't remember. Only time I ever used babel was for this purpose.

[atherdon]

got it, no problem, just was curious, because of your config at PR

[atherdon]

this package have an old version of babel core

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