Dependency errors when using Puppeteer (Headless Chrome) with Vue + Webpack

Question

I'm using these two libraries/templates:

https://github.com/GoogleChrome/puppeteer (Headless Chrome)

https://github.com/vuejs-templates/pwa (Vue template using Webpack and Express).

This is the code:

export default {
  mounted () {
    const puppeteer = require('puppeteer')

    ;(async () => {
      const browser = await puppeteer.launch()
      const page = await browser.newPage()
      await page.goto('https://www.google.com/search?tbm=bks&q=%22this+is%22')
      const result = await page.evaluate(() => {
        const stats = document.querySelector('#resultStats')
        return stats.textContent
      })
      console.log(result)
      await browser.close()
    })()
  }
}

I did npm install many times but I still have dependency errors:

These dependencies were not found:

child_process in ./node_modules/puppeteer/lib/Launcher.js, ./node_modules/puppeteer/node6/Launcher.js

fs in ./node_modules/extract-zip/index.js, ./node_modules/extract-zip/node_modules/mkdirp/index.js and 18 others

To install them, you can run: npm install --save child_process fs Listening at http://localhost:8080

Node: I also did npm install --save child_process fs many times. Same error.

scniro scniro · Accepted Answer · 2017-11-09T13:46:03

This appears to be a complaint from webpack regarding built in node modules. Try adding the following to your webpack config...

target: 'node'

from the webpack docs...

In the example above, using node webpack will compile for usage in a Node.js-like environment (uses Node.js require to load chunks and not touch any built in modules like fs or path).

Alternatively, you can workaround this with the following...

node: {
  fs: 'empty',
  child_process: 'empty'
}

Dependency errors when using Puppeteer (Headless Chrome) with Vue + Webpack

2 Answers