Paho MQTT导入错误排查：Cannot read property 'Client' of undefined

这个问题我之前帮不少开发者排查过，核心原因就是你导入paho-mqtt的方式不对，导致Paho对象没有被正确引入，才会抛出Cannot read property 'Client' of undefined的错误。下面给你两种场景下的正确解决方案：

1. ES模块环境（Vue/React/现代前端项目） #

paho-mqtt的ES模块导出结构不是默认导出整个Paho对象，所以你用import Paho from 'paho-mqtt'会拿到undefined。正确的做法是用命名空间导入：

// 正确的导入方式
import * as Paho from 'paho-mqtt';

// 注意：location.port是字符串，要转成数字类型
const client = new Paho.MQTT.Client(location.host, Number(location.port), location.clientID);

const MQTTConnectAndMessage = (message) => {
  // 这里要把message传递给sendMQTTMessage，不然内部拿不到
  client.connect({ onSuccess: () => sendMQTTMessage(message) });
};

const sendMQTTMessage = (msg) => {
  // 完整创建MQTT消息的代码
  const mqttMessage = new Paho.MQTT.Message(msg);
  // 必须设置消息要发送到的主题
  mqttMessage.destinationName = "your/target/topic";
  // 发送消息
  client.send(mqttMessage);
};

2. 传统浏览器环境（直接用script标签） #

如果你是在原生HTML项目里使用，不需要ES模块导入，直接引入paho-mqtt的编译文件即可：

首先找到yarn安装后的文件路径：node_modules/paho-mqtt/dist/paho-mqtt.js，在HTML里引入：

<script src="./node_modules/paho-mqtt/dist/paho-mqtt.js"></script>

这时候Paho会作为全局对象存在，你的代码可以直接使用，不需要import语句：

const client = new Paho.MQTT.Client(location.host, Number(location.port), location.clientID);

// 后续的connect和发送逻辑和上面一致

额外注意事项 #

• 确保location.clientID是唯一的字符串，MQTT服务端要求每个客户端ID不能重复，否则会踢掉之前的连接
• 确认你的MQTT broker已经开启了WebSocket支持，并且使用的端口正确（比如常用的WebSocket端口是8083，TCP端口是1883）
• 如果连接失败，可以在connect方法里添加onFailure回调排查错误：

  client.connect({
    onSuccess: () => sendMQTTMessage(message),
    onFailure: (error) => console.error("连接失败:", error)
  });
  

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