Using Puppeteer to Render React Components in a Headless Environment

Other Questions Puppeteer
1

I’m currently developing a project that involves rendering React components with Puppeteer in a headless Chrome browser through my Node.js setup. I’m experiencing some difficulties with retrieving the correct DOM element.

The issue I’m facing is that when I try to capture a DOM element from the webpage, it appears accurately in the browser console, yet it shows up as an empty object in my Node.js terminal:

  • In the browser console, I see: console.log(element) => <div id="app"></div>
  • In the Node.js terminal, I see: console.log(appElement) => {}

Here’s the code I’m working with:

puppeteer.launch().then(async browserInstance => {
    const page = await browserInstance.newPage();
    
    const filePath = path.resolve('./src/components/example/test.html');
    await page.goto(`file://${filePath}`);
    
    const appElement = await page.evaluate((selector) => {
        const element = document.querySelector(selector);
        console.log(element);
        
        return element;
    }, '#app');
    
    console.log(appElement);
});

When I attempt to render my React component like so:

ReactDOM.render(
    <div>{'Greetings!'}</div>,
    appElement
);

I encounter the error: UnhandledPromiseRejectionWarning: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

I suspect that I might be overlooking a key aspect of how to properly insert React components into a page controlled by Puppeteer. Any insights on how to resolve this would be greatly appreciated!

2

I hit the same issue with Puppeteer and React. The problem is DOM elements can’t be serialized between browser and Node.js contexts. When you return the element from page.evaluate(), it gets serialized into an empty object.

You need to handle React rendering entirely inside the browser context with page.evaluate(). Don’t try passing DOM elements back to Node.js - inject your React component directly in the browser. Load React via CDN in your HTML or use page.addScriptTag() to load it dynamically. Then use page.evaluate() to run ReactDOM.render() with your component inside the browser context where the DOM element actually exists. Everything stays in the same environment and React can mount to the target container properly.

3

DOM elements don’t survive serialization when you return them from page.evaluate - that’s why you’re getting an empty object. Use page.evaluateHandle() instead to get a reference that stays in the browser context. Then you can work with it using other Puppeteer methods without losing the DOM reference.

4

Yeah, that’s a common Puppeteer headache. DOM elements get stripped when you pass them between the browser and Node.js contexts through page.evaluate(). I’ve had better luck pre-rendering React components server-side first, then injecting them into the Puppeteer page. Just use ReactDOMServer.renderToString() to generate your HTML markup in Node.js, then inject it with page.setContent() or page.evaluate() using innerHTML. Skips the whole DOM reference passing mess. You could also bundle your React component with webpack, serve it as a static file, and let Puppeteer load the fully rendered page. Way cleaner than trying to juggle DOM manipulation across contexts.