关于Webpack(React-scripts)升级到5.0.0版本后出现的Buffer is not defined的问题

在与伙伴前端开发的过程中用到ethers和eccrypto等包，但这些包好像都要用webpack4版本中Buffer的特性，但在升级后Buffer的自动导入被取消了？我和他水平都不高，查网上教程大部分都说要用polyfill，但关于polyfill配置buffer的教程都很难看懂，希望有前端老手能指点一下！

报错内容如下

尝试做的一些配置，但都是跟网上做的不太懂原理，实际上没什么效果

const webpack = require('webpack');

module.exports = {
    plugins: [
        // Work around for Buffer is undefined:
        // https://github.com/webpack/changelog-v5/issues/10
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
        }),
        new webpack.ProvidePlugin({
            process: 'process/browser',
        }),
    ],
}
module.exports = function override(config, env) {
    //do stuff with the webpack config...
    config.resolve.fallback = {
        url: require.resolve('url'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

这个问题代码出在mqtt-packet这个依赖包中，查看github代码，该依赖包的工程根目录下：constants.js有一段代码：

protocol.SESSIONPRESENT_HEADER = Buffer.from([protocol.SESSIONPRESENT_MASK])

其中Buffer找不到定义了。

解决方法：
webpack的ProvidePlugin组件，在webpack设置中添加：

new webpack.ProvidePlugin({undefined

Buffer: ['buffer', 'Buffer']})

https://blog.csdn.net/huyongchao98/article/details/110469379

哈哈哈，react-script升级5.x之后，问题一大堆。
最好办法还是去github那里，先搜一下类似的issue解决办法；没有的话，开一个issue，等待大佬的回答。

另外，这个问题似乎是相关的， 你可以试试解决方法：

https://github.com/facebook/create-react-app/issues/11756

解决问题，是需要一些webpack的基础知识的，学习一下吧。

Buffer is not defined
缓冲区没有定义

Buffer is not defined
这个问题代码出在mqtt-packet这个依赖包中，查看github代码，该依赖包的工程根目录下：constants.js有一段代码：
protocol.SESSIONPRESENT_HEADER = Buffer.from([protocol.SESSIONPRESENT_MASK])
其中Buffer找不到定义了。
网上查询了一些资料，有说要引入buffer这个依赖的，于是加入这个依赖，但是问题依旧，猜测是因为虽然加入了依赖，但没有引入的原因。
但是如何引入呢，毕竟mqtt-packet是第三方包?
想到了webpack的ProvidePlugin这个组件，于是在webpack设置中添加了：
new webpack.ProvidePlugin({undefined
Buffer: ['buffer', 'Buffer']})
一位博主是这样解决的，希望对题主有所帮助！
具体的可以看看这位博主写得这篇文章，升级时一些问题的解决方案：
https://blog.csdn.net/huyongchao98/article/details/110469379?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-3-110469379.pc_agg_new_rank&utm_term=webpack+%E5%8D%87%E7%BA%A75&spm=1000.2123.3001.4430