React浏览器应用调用AWS IoT Device SDK JS v2 API遇报错问题排查

问题场景 #

在浏览器环境的React应用中使用AWS IoT Device SDK JS v2，已准备好证书与凭据，编写的MQTT连接代码如下：

import { iot } from 'aws-iot-device-sdk-v2';
import React, { useState } from 'react';

function App() {
    try {
      const config = iot.AwsIotMqttConnectionConfigBuilder.newDirectMqttBuilderWithMtlsFromPath(
        'endpoint',
        'device.pem.crt',
        'private.pem.key'
      );

    .. Rest of the code ..

运行后浏览器控制台报错：

TypeError: aws_iot_device_sdk_v2__WEBPACK_IMPORTED_MODULE_0__.iot.AwsIotMqttConnectionConfigBuilder.new_mtls_builder_from_path is not a function

问题原因与解决办法 #

1. 导入方式错误 #

AWS IoT Device SDK JS v2在浏览器环境中的导出结构并非嵌套在iot对象下，直接导入所需类即可：

// 修正导入方式
import { AwsIotMqttConnectionConfigBuilder, mqtt } from 'aws-iot-device-sdk-v2';

2. 误用Node.js专用方法 #

newDirectMqttBuilderWithMtlsFromPath是Node.js环境专用的方法，因为浏览器无法直接读取本地文件系统路径。浏览器环境需要通过证书内容而非文件路径构建配置，步骤如下：

• 通过文件上传或预加载证书/私钥的文本内容
• 使用newDirectMqttBuilderWithMtls方法初始化配置，再手动传入证书和私钥内容

修正后的代码示例：

import { AwsIotMqttConnectionConfigBuilder, mqtt } from 'aws-iot-device-sdk-v2';
import React, { useState } from 'react';

function App() {
  const [connection, setConnection] = useState(null);

  // 构建连接的核心逻辑
  const connectToIoT = async (certContent, privateKeyContent) => {
    try {
      const configBuilder = AwsIotMqttConnectionConfigBuilder.newDirectMqttBuilderWithMtls(
        'your-iot-endpoint' // 替换为你的AWS IoT端点
      );
      // 传入证书和私钥的文本内容
      configBuilder.withCertificate(certContent);
      configBuilder.withPrivateKey(privateKeyContent);
      // 设置唯一的客户端ID（必填）
      configBuilder.withClientId(`react-iot-client-${Math.random().toString(36).substring(2, 10)}`);

      const config = configBuilder.build();
      const client = new mqtt.MqttClient();
      const conn = client.newConnection(config);

      // 执行连接
      await conn.connect();
      setConnection(conn);
      console.log('AWS IoT连接成功');
    } catch (err) {
      console.error('连接失败:', err);
    }
  };

  // 示例：通过文件上传获取证书内容
  const handleCertUpload = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (event) => {
      const certContent = event.target.result;
      // 这里需要同时获取私钥文件内容，可添加对应的上传控件
      // connectToIoT(certContent, privateKeyContent);
    };
    reader.readAsText(file);
  };

  return (
    <div className="App">
      <h3>AWS IoT连接测试</h3>
      <div>
        <label>上传设备证书：</label>
        <input type="file" accept=".crt,.pem" onChange={handleCertUpload} />
      </div>
      <div>
        <label>上传私钥：</label>
        <input type="file" accept=".key,.pem" onChange={(e) => {
          // 类似证书上传逻辑，获取私钥内容
        }} />
      </div>
    </div>
  );
}

export default App;

3. Webpack额外配置（可选） #

如果SDK的WebAssembly模块加载失败，需要在Webpack配置中添加对WASM的支持：

// webpack.config.js
module.exports = {
  // 其他现有配置
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: 'webassembly/async',
      },
    ],
  },
  experiments: {
    asyncWebAssembly: true,
  },
};

总结 #

当前报错的直接原因是导入方式错误和误用Node.js专用的文件路径方法，Webpack配置问题是次要的，仅在WASM模块加载失败时需要调整。

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