Use puppeteer with webpack

Question

How can I use puppeteer with webpack? No matter what I try it cannot find it. Here's as far as I got:

Dependency is installed in package.json:

npm i puppeteer

In webpack.dev:

module.exports = {
    // ... I'm skipping over a bunch of stuff here, then:
    externals: {
        puppeteer: require('puppeteer'),
    }
}\\

Then in my entry file index.js on the client side:

import puppeteer from 'puppeteer';

Immediately after I run:

puppeteer.launch();

Only to get this error:

Uncaught TypeError: Cannot read property 'launch' of undefined

What am I doing wrong? I'm always struggling with using external plugins within webpack.

Quick update, I tried the webpack.providePlugin and tested it with the jquery library in parallel. The jquery works by following the same logic, but puppeteer still gives me an error:

In webpack.dev:

    plugins: [
    new webpack.ProvidePlugin({
        puppeteer: 'puppeteer',
        jQuery: 'jquery'
    })

in index.js:

import 'puppeteer'
import 'jquery'

Then I get a bunch of errors such as:

/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\victo\OneDrive\Desktop\20200307-kino\kino\node_modules\puppeteer\lib\cjs\puppeteer\node'
errors @ client:159
eval @ socket.js:47
sock.onmessage @ SockJSClient.js:67
EventTarget.dispatchEvent @ sockjs.js:170
eval @ sockjs.js:888
SockJS._transportMessage @ sockjs.js:886
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2962
client:159 ./node_modules/extract-zip/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\victo\OneDrive\Desktop\20200307-kino\kino\node_modules\extract-zip'

Does this answer your question? [How to make Puppeteer work with a ReactJS application on the client-side](https://stackoverflow.com/questions/55031823/how-to-make-puppeteer-work-with-a-reactjs-application-on-the-client-side) — Thomas Dondorf, Jan 10 '21 at 15:06

score 0 · Answer 1 · answered Apr 05 '22 at 15:14

0

Add to your config as follows. that worked for in my case. The commented out ones might apply as well

module.exports = {
// ... 
node: {
  child_process: 'empty',
  // net: 'empty',
  // dns: 'empty',
  // tls: 'empty',
  // readline: 'empty'
}
}

answered Apr 05 '22 at 15:14

flexxxit

2,440
5
42
69

score 0 · Answer 2 · answered Dec 18 '22 at 23:07

I did encounter similar issues while using webpack for node application with puppeteer as a dependency. In your case simple:

module.exports = {
    // other conf
    externals: {
        puppeteer: "require('puppeteer')", // use additional double quotes here to define valid external
    }
}

should do the job.

Use puppeteer with webpack

2 Answers2