React with Google Chromes Puppeteer

Question

Trying to display a react component with chrome puppeteer  working in my Node.js Im environment having the following problem:

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

• testWrapperin 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 leads to an error (node:90555) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Invariant Violation: _registerComponent(...): Target container is not a DOM element.

It seems to me that even if I manage to get the DOM element, I missed something here to introduce a reactive application.

Answer 1

.evaluate dom. . , JS, .

. -, , .

, . . webpack .

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;

webpack

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
  }
};

, webpack, bundle.js. ,

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();
})();

, renderIt, . , ,

! :)

! script - CORS, injectFile, addScriptTag 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