Using Puppeteer to Render a React Component

Other Questions Puppeteer
1

I’m attempting to render a React component using Puppeteer within my Node.js setup, but I’m encountering an issue. Here are the problems I’m facing:

  • When logging the element in the headless Chrome console, I get: console.log(element) => <div id="test-wrapper"></div>.
  • Yet, when I check testContainer in the terminal, console.log(testContainer) results in: {}.
puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    const testHTMLPath = path.resolve('./lib/components/util/testDocument.html');
    await page.goto(`file://${testHTMLPath}`);

    const testContainer = await page.evaluate((selector) => {
        const el = document.querySelector(selector);
        console.log(el);
        return el;
    }, '#test-wrapper');

    console.log(testContainer);
});

Now, I’m trying to do this:

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

However, this leads to an error: (node:90555) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Invariant Violation: _registerComponent(...): Target container is not a DOM element.

I sense that even if I retrieve the DOM element correctly, I might be overlooking something necessary for properly injecting my React application.

2

Hey! I think, the trouble is that when you use page.evaluate, the function only resolves basic JavaScript values, like strings or numbers. Web elements or DOM nodes can’t be directly returned to Node. Try using ElementHandle if you need to pass DOM stuff around.

3

Your issue seems to stem from misunderstanding how Puppeteer evaluates scripts within the page context. The ElementHandle that Puppeteer provides operates on the browser side, whereas Node.js and your server operate separately, so when you attempt to use testContainer directly in your Node.js code, it’s ineffective. Try this approach: use page.evaluate to manipulate the DOM within the browser context completely, handling React rendering there. This way, you stay within the browser’s context and can fully utilize the DOM for rendering.

4

Hey, just to add, you could be missing setup of environment for rendering react on server side. You might want to incloude @babel/register and some libs that help JSX in Node like react-dom/server or express-react-views. Puppeteer doesn’t handle jsx natively. Cheers!

5

One potential solution is to ensure that your setup is properly linking the React component rendering process with Puppeteer’s browser context. When dealing with headless browsers, it’s important to remember that scripts run separately from the Node.js process. You can try using page.exposeFunction to bridge functions between Node and the browser context. This way, you can perform DOM manipulations directly in the page context and handle the React rendering more effectively in the browser environment itself.