Possible to render a page on a command line? Example?

[reece]

I inherited a working project that generates a PDF using react-pdf/renderer. It currently brings up a development server, which then renders the PDF in a browser using static data (json). I would like to automate this process in a headless environment.

Is it possible to invoke react-pdf/renderer as a headless, command line script? Are there any examples of this?

The ideal for my needs is render-pdf <input.json >output.pdf or similar.

The current rendering code (server.js) is quite simple:

import ReactPDF from '@react-pdf/renderer';
import React from 'react';

import ReportDocument from './src/components/ReportDocument';
import _data from './src/data/index.js';

export const data = _data;
export const getDocumentStream = async (body) => {
  try {
    const stream = await ReactPDF.renderToStream(<ReportDocument data={body}/>);
    return { stream };
  } catch (error) {
    console.error(error);
    return {
      error: {
        message: error.message,
        stack: error.stack,
      }
    };
  }
};

Edit 1: The outstanding issue is that import ReportDocument from './src/components/ReportDocument'; fails with Error: Cannot find module './src/components/ReportDocument'. ReportDocument.jsx is a jsx file and I was expecting/hoping that it would import as it does in server.js above. I'm too new to js and react to understand why it's not loading.

[Chagall]

I think issue here is that you are not exporting the ReactDocument properly. Try adding the line export default ReportDocument at the end of the jsx file, and see if it works.

[reece]

Thanks for the reply. I've moved on to a different solution and can't readily test this suggestion now.

[Chagall]

Guess we'll never know then 😂 💁

[Chagall]

If you're not going to bother with this anymore, could you please mark this as answered? Thanks!

[reece]

I wasn't sure of the etiquette about marking answered when I'm not really verifying the answer. But, since you asked, sure!

[Chagall]

You have a point. It's not really answered to be honest, but since you already got a solution for this, the question would be hanging on open forever without a way to verify.

[wkrueger]

You can use react-pdf in node.js.

Try @babel/register to compile the JSX.

const pdf = require('@react-pdf/renderer').pdf
const stream = pdf(DocumentJsx).toBuffer() //though the name is "buffer" it returns a readable
process.stdout.pipe(stream) // or however youd like to consume your stream

[idrtabd]

I'm kinda new, I wish this could be a bit more detailed, like for Dummies. I'm comfortable with React for browser, but Node, not so much. Thanks!

I've installed Babel-Register: npm install babel-register --save-dev

1. • Created a node project: npm init
2. • Installed react: npm i react
3. • created an app.js file:

App.JS->

require('babel-register');
require('./test.js')

4. Created a test.js file

 var React = require('react');
const x = (
<React.Fragment></React.Fragment>
)
console.log("Test")

I get errors:
Unexpected token (3:0)
1 | var React = require('react');
2 | const x = (

3 | <React.Fragment></React.Fragment>
| ^

[Chagall]

You could host your repository here on github and link it, with just that information I couldn't reproduce your problem.

Unexpected token error is probably because your interpreter / IDE is not recognizing <React.Fragment> as valid code for whatever reason.