How can I use a React component within a Node script?

Question

I'm currently trying to use react-pdf to generate and save a pdf to disk. Rendering to a webpage works, but the method that I need to invoke to save a pdf to disc,

    ReactPDF.render()

does not work within the npm start (react-scripts) way of running React that I've used in the past to create webpages. From reading this issue, it seems that it needs to be run as a "Node only api". So my question is, what dependencies, commands, and steps do I need to take to run some react code and save a pdf to disk with something like

   > node index.js

currently when I run the above command I get

import React from 'react';
       ^^^^^
SyntaxError: Unexpected identifier

Then, running

    node --experimental-modules index.mjs

I get

ReactPDF.render(<App />, `${__dirname}/output/test.pdf`);
                ^
SyntaxError: Unexpected token <

Here are my two files:

index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import ReactPDF from '@react-pdf/renderer';


    ReactPDF.render(<App />, `${__dirname}/output/test.pdf`);
    //ReactDOM.render(<App />, document.getElementById('root'));

App.js

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

class App extends Component {



  render() {

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


    return (
      <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 App;

package.json

{
  "name": "ccv-generator-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@react-pdf/renderer": "^1.4.2",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-scripts": "2.1.8",
    "ts-pnp": "^1.0.1",
    "typescript": "^3.3.4000"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

A follow up question would be, Is what I am trying to do an anti-pattern?

How do I execute in a node only environment? When I try to run > node index.js it throws many errors. Whats the best way to setup the kind of environment I need? — Bijan Massoumi
– Bijan Massoumi, Commented Mar 27, 2019 at 23:16
Because React’s component hierarchies and JSX integration make it excellent for creating PDFs. — Bijan Massoumi
– Bijan Massoumi, Commented Mar 28, 2019 at 1:23

lyosef · Accepted Answer · 2019-03-28 00:04:47Z

1

Since you're running index.mjs directly from node, it does not go through the build and transpilation process of react-scripts, meaning you have to do it manually.

Node cannot directly parse jsx (<App/>, for example) - so you will need to run your code through Babel with React preset in order to run it.

Since the dependecies should be already installed, try running:

npx babel index.mjs -o index-compiled.js --presets=es2015,react

and then run the compiled file:

node index-compiled.js

answered Mar 28, 2019 at 0:04

lyosef

6,2422 gold badges29 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bijan Massoumi Over a year ago

a step in the right direction, but it throws a syntax error when it tries to import ./index.css

lyosef Over a year ago

@BijanMassoumi do you actually need index.css? It seems that the styling should be done only using their StyleSheet module

Bijan Massoumi Over a year ago

I could style through React. Wondering what this manual process is missing that the react-scripts do, considering it parses css just fine normally.

Keith Over a year ago

@BijanMassoumi react-scripts uses webpack to compile, for things like CSS it uses something called loaders. Having CSS loaded in a node.js app doesn't make any sense. The StyleSheet.create I assume won't be css, but a subset that react-pdf can parse and generate your pdf from. You can even use webpack to compile for node.js, but this wouldn't help anyway, as again CSS in node has no meaning.

Collectives™ on Stack Overflow

How can I use a React component within a Node script?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related