How to exclude by webpack.config.js, or fix this problem

Question

I'm using react create app to make a website,and I almost complete my code, but after I import 'puppeteer',there are many error come out. e.g.

ERROR in ./node_modules/yauzl/index.js 13:16-43
Module not found: Error: Can't resolve 'stream' in 'C:\Users\User\Documents\VSCode\lubnx\node_modules\yauzl'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }
 @ ./node_modules/extract-zip/index.js 19:14-30
 @ ./node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js 75:38-60
 @ ./node_modules/puppeteer/lib/cjs/puppeteer/node/Puppeteer.js 31:28-58
 @ ./node_modules/puppeteer/lib/cjs/puppeteer/initialize-node.js 29:23-53
 @ ./node_modules/puppeteer/lib/cjs/puppeteer/node.js 22:29-60
 @ ./node_modules/puppeteer/cjs-entry.js 28:24-59
 @ ./src/bsc.js 3:18-38
 @ ./src/App.js 9:0-24
 @ ./src/index.js 7:0-24 13:35-38

90 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.65.0 compiled with 90 errors and 58 warnings in 2608 ms

There are so many errors,and I have no idea. I have crawled some website but still confused,I try to make a webpack.config.js,but it seems don't work.

const path = require('path');
module.exports = {
    entry: [
      './index.js'
    ],
    output: {
      path: path.join(__dirname,"public"),
      filename: 'bundle.js'
    },
    module: {
        rules:[
            {
                test: /\.yauzl$/,
                exclude: /\.js$/,
            }
        ]
    }
  };

here is my puppeteer code

const puppeteer = require('puppeteer');
const dappeteer = require('@chainsafe/dappeteer');

const seed = 'quote violin crane pride emotion cart pyramid grunt custom release work sauce';
const mining = 'https://www.binaryx.pro/#/game/work?workType=partTime&work=2';

const bsc = async()=> {
  const browser = await dappeteer.launch(puppeteer, { metamaskVersion: 'v10.1.1' });

  const metamask = await dappeteer.setupMetamask(browser, {
    seed: seed,
    password: 'pass1234',
});

  await metamask.addNetwork({
    networkName: 'BSC',
    rpc: 'https://bsc-dataseed1.binance.org/',
    chainId: 56,
    symbol: 'BNB',
    explorer: 'https://bscscan.com/',
  });

  await metamask.switchNetwork('BSC');

  const page = await browser.newPage();
  await page.goto(mining, { waitUntil: 'networkidle2' });
  await metamask.approve();
  await new Promise(resolve => setTimeout(resolve, 7000));
  return (
    await page.evaluate(async() => {
      const mn = document.querySelector('#app > section > main > div > div.work-page > div.job-record > div.flex-between.record-title--wrap > span > div');
      const res = mn.innerText;
      return res;
    })
  )
}
bsc();

export default bsc;

What exactly are you trying to do here that you need to bundle something like Puppeteer with webpack...? Can you explain, in your own words, what you're using Puppeteer for? — esqew, Jan 03 '22 at 01:19
I'm trying to crawl an other website,so I need puppeteer,when I import 'puppeteer' in my code,and run npm start,I'll get these error. — huihui, Jan 03 '22 at 01:37
Puppeteer is *not* designed to run in a browser. Why are you trying to use it as such? — esqew, Jan 03 '22 at 01:37
Does this answer your question? [How to run Puppeteer code in any web browser?](https://stackoverflow.com/questions/54647694/how-to-run-puppeteer-code-in-any-web-browser) — esqew, Jan 03 '22 at 01:38

score 0 · Answer 1 · answered Jan 03 '22 at 01:28

0

As Webpack suggests, you can include the stream polyfill by adding a fallback (resolve.fallback: { "stream": require.resolve("stream-browserify") }):

const path = require('path');
module.exports = {
    entry: [
      './index.js'
    ],
    output: {
      path: path.join(__dirname,"public"),
      filename: 'bundle.js'
    },
    resolve: {
        fallback: {
            "stream": require.resolve("stream-browserify");
        }
    }
    module: {
        rules:[
            {
                test: /\.yauzl$/,
                exclude: /\.js$/,
            }
        ]
    }
  };

And install stream-browserify:

npm i stream-browserify

You can read more about resolve.fallback here.

answered Jan 03 '22 at 01:28

Capt 171

665
5
15

I have done just like yours,but the error still happen. const path = require('path'); module.exports = { entry: [ './index.js' ], output: { path: path.join(__dirname,"public"), filename: 'bundle.js' }, resolve: { fallback: { "stream": require.resolve("stream-browserify"), "fs": require.resolve("stream-browserify"), } }, module: { rules:[ { test: /\.yauzl$/, exclude: /\.js$/, } ] } }; – huihui Jan 03 '22 at 10:37
@huihui That's interesting...Could I take a look at your full code (or repository?) – Capt 171 Jan 05 '22 at 10:00
Sure! https://github.com/hp41299889/lubnx – huihui Jan 11 '22 at 08:42
I don't...seem to see a `webpack.config.js` – Capt 171 Jan 11 '22 at 08:46
oh, maybe I forgot push the latest version, but I did just like I posted. – huihui Jan 11 '22 at 09:18
I can't help you if the file isn't there :/ – Capt 171 Jan 11 '22 at 10:07

How to exclude by webpack.config.js, or fix this problem

1 Answers1