React使用mqttjs出现Uncaught TypeError: connect属性未定义错误排查

错误原因分析 #

出现Uncaught TypeError: Cannot read properties of undefined (reading 'connect')的核心原因是**mqtt对象未被正确导入或初始化**，常见场景包括：

• 缺少正确的mqtt包导入语句
• 导入方式不符合mqtt.js在浏览器环境（React）的要求
• 安装的mqtt包版本与导入方式不兼容

分步解决方案 #

1. 确保正确导入mqtt包 #

React属于浏览器环境，mqtt.js提供了专门的浏览器编译版本，需使用以下导入方式：

import mqtt from 'mqtt/dist/mqtt.min'

或针对v4+版本使用：

import * as mqtt from 'mqtt'

注意：不要直接使用import mqtt from 'mqtt'，这会导入Node.js环境的代码，浏览器无法识别。

2. 修正后的完整代码（含发布消息功能） #

import { useState, useEffect } from 'react';
import mqtt from 'mqtt/dist/mqtt.min';

function S2(props) {
  const [client, setClient] = useState(null);
  const [message, setMessage] = useState('Hello from React MQTT');

  useEffect(() => {
    const mqttOptions = {
      clientId: 'emqx_react_' + Math.random().toString(16).substring(2, 8),
      username: 'emqx_test',
      password: 'emqx_test',
      clean: true,
      reconnectPeriod: 1000, 
      connectTimeout: 30 * 1000, 
    };

    const mqttClient = mqtt.connect('ws://broker.emqx.io:8084/mqtt', mqttOptions);

    mqttClient.on('connect', () => {
      console.log('Component A connected to MQTT');
      mqttClient.subscribe('testtopic/react', { qos: 0 });
    });

    mqttClient.on('message', (topic, message) => {
      console.log(`Received message in Component A from topic ${topic}: ${message.toString()}`);
    });

    mqttClient.on('error', (err) => {
      console.error('MQTT connection error:', err);
      mqttClient.end();
    });

    setClient(mqttClient);

    return () => {
      if (mqttClient) {
        mqttClient.end();
      }
    };
  }, []);

  const publishMessage = () => {
    if (client && client.connected) {
      client.publish('testtopic/react', message, { qos: 0 }, (err) => {
        if (err) {
          console.error('Publish error:', err);
        } else {
          console.log('Message published successfully');
        }
      });
    } else {
      console.log('MQTT client not connected');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Enter message to publish"
      />
      <button onClick={publishMessage}>Publish Message</button>
    </div>
  );
}

export default S2;

3. 额外检查项 #

• 确认已正确安装mqtt包：执行npm install mqtt或yarn add mqtt，安装后可查看package.json中的依赖版本
• 若问题仍存在，尝试清除缓存后重装：

  rm -rf node_modules package-lock.json
  npm install
  

• 在浏览器开发者工具的Network面板，检查ws://broker.emqx.io:8084/mqtt的WebSocket连接是否能正常建立

内容的提问来源于stack exchange，提问作者nguyen tran dai duong