React项目App.js导入mqtt模块时出现Buffer未定义错误求助

错误原因 #

浏览器环境默认不包含Node.js核心模块Buffer，而mqtt依赖的mqtt-packet包直接使用了这个模块，导致出现引用错误。

解决方法 #

方法1：手动注入Buffer到全局

• 安装buffer依赖：

npm install buffer

• 在App.js的最顶部添加以下代码，再引入mqtt：

import { Buffer } from 'buffer';
window.Buffer = Buffer;

import mqtt from 'mqtt';

方法2：通过webpack配置自动注入（Create React App项目）

webpack5不再自动polyfill Node.js核心模块，需手动配置：

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js文件，添加配置：

const { override, addWebpackPlugin } = require('customize-cra');
const webpack = require('webpack');

module.exports = override(
  addWebpackPlugin(
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    })
  )
);

3. 修改package.json中的scripts命令，替换react-scripts为react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

4. 重启开发服务即可。

方法3：使用CDN引入（无需npm安装）

在public/index.html中添加CDN脚本，直接使用全局mqtt变量：

<script src="https://unpkg.com/buffer@6.0.3/dist/buffer.min.js"></script>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

在App.js中无需import，直接调用：

const client = mqtt.connect('ws://你的MQTT broker地址');

内容的提问来源于stack exchange，提问作者cs bhagwant