如何通过 webpack.config.js 排除，或者修复这个问题

Question

我正在使用 react create app 来制作一个网站，我几乎完成了我的代码， 但是在我导入'puppeteer'之后，出现了很多错误。 例如

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

有很多错误，我不知道。 我爬了一些网站，但还是一头雾水，我尝试制作一个 webpack.config.js，但它似乎不起作用。

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

这是我的傀儡代码

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();

导出默认 bsc；

Answer 1

正如 Webpack 建议的那样，您可以通过添加后备 (resolve.fallback: { "stream": require.resolve("stream-browserify") }) 来包含 stream polyfill：

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$/,
            }
        ]
    }
  }; 

并安装stream-browserify:

npm i stream-browserify

你可以阅读更多关于resolve.fallbackhere的信息。

---