React with Google Chromes Puppeteer

Question

Trying to render a react component with chrome puppeteer running on my Node.js environment I’m having following problem:

• logging element gives me in the headless chrome console: console.log(element) => <div id="test-wrapper"></div>

• testWrapper in the terminal console.log(testWrapper) => {}

  puppeteer.launch().then(async browser => {
  
      const page = await browser.newPage();
  
      const testDocumentPath = path.resolve('./lib/components/util/testDocument.html');
      await page.goto(`file://${testDocumentPath}`);
  
      const testWrapper = await page.evaluate((selector) => {
          const element = document.querySelector(selector);
          console.log(element);
  
          return element;
      }, '#test-wrapper');
  
      console.log(testWrapper);
  });
  

So trying to do …

ReactDOM.render(
    <div>{':)'}</div>,
    testWrapper
);

… obviously results in an error (node:90555) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Invariant Violation: _registerComponent(...): Target container is not a DOM element.

I feel like even if I manage to get the DOM element I’m missing something here to inject a react application.

Answer 1

.evaluate does not return a dom element. And, you are trying to modify the elements in different context. The page in the browser window and the context you have in your nodeJS is absolutely different.

Here is a different way to deal with React and Puppeteer. First, I have an entry file where I export the function to window.

By doing this, I can access it from the browsers context easily. Instead of window, you can actually export it and try expose-loader and so on. I'll use webpack to build it.

import React from 'react';
import { render } from 'react-dom';

function Hello() {
  return <h1>Hello from React</h1>;
}

function renderIt(domNode) {
  render(<Hello />, domNode);
}

window.renderIt = renderIt;

On the webpack config,

const webpack = require('webpack');

const loaders = [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
      presets: ['babel-preset-es2015', 'babel-preset-react'],
      plugins: []
    }
  }
];

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js',
    libraryTarget: 'umd'
  },
  module: {
    loaders: loaders
  }
};

Now whenever I run webpack, it'll create a bundle.js file for me. Now let's have a puppeteer file,

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://github.com');
  await page.addScriptTag({ path: require.resolve('./bundle.js') });
  await page.evaluate(() => {
    renderIt(document.querySelector('div.jumbotron.jumbotron-codelines > div > div > div > h1'));
  });
  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();

As you can see, I'm using the renderIt function that I exposed to window earlier. And when I run it, here is the result,

Sweet! Hello from react :)

Oh! And if it fails to execute script on the page due to CORS issue, you can inject it instead using the old injectFile function, until they fix their addScriptTag function, or remove deprecation from injectFile.

/**
 * injects file to puppeteer page context
 * @param  {Object} page     context where to execute the script
 * @param  {String} filePath path of specific script
 * @return {Promise}         Injects content to page context
 */
const fs = require('fs');

async function injectFile(page, filePath) {
  let contents = await new Promise((resolve, reject) => {
    fs.readFile(filePath, 'utf8', (err, data) => {
      if (err) return reject(err);
      resolve(data);
    });
  });
  contents += `//# sourceURL=` + filePath.replace(/\n/g, '');
  return page.mainFrame().evaluate(contents);
}

// usage: await injectFile(page, require.resolve('FILE PATH'));
// export it if you want to keep things seperate