Can't Run Puppeteer In React App, Module Not Found: Can't Resolve 'ws' When Compiling

I was wondering if it was possible to run puppeteer in my react app. Whenever I try to run puppeteer in my react app I get 'Module not found: Can't resolve 'ws''. I've tried instal

Solution 1:

Simple answer : You can't run puppeteer in react app.

React is a client side framework. which means it runs in browser.

While puppeteer is a NodeJS lib, it needs Node.js and runs on server side.

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.

Solution 2:

Expanding on the above answer. You cannot directly run Puppeteer on a react app. React app is a frontend framework and you would need Puppeteer to run on a node js, server. It's a simple "fix" and I wanted to explain it a little more than the answer above does.

The steps to get them to work together would be.

1. Setup an express server. You can create an express server like so: Separate directory reactServer. Npm init directory and npm i express.

In your express server you allocate a path

const express = require('express')
const app = express()
const port = 5000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.get('/my-react-path', (req, res) => {
  // run any scripts you need here
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Then your react app will interact with your server like so:

localhost:5000/my-react-path

In the my-react-path you can create a function that fires up puppeteer and does all the things you want on the server side and it can return whatever results to React. The above example is just to get you started it doesn't have anything related to puppeteer.