mqtt.MqttClient is not a constructor

[byoung96]

Describe the bug

I am trying to setup a connection to AWS IoT from a web application using Mqtt5 and custom auth. Whenever I call client.start() I receive the error mqtt.MqttClient is not a constructor.

Expected Behavior

I would expect that if I had the custom auth configured correctly it would successfully make the connection to mqtt when I call the method client.start().

Current Behavior

I get the following error.

Reproduction Steps

This was mainly happening in a React app that is built using Vite. I thought it might be a configuration issue so I cloned this repo and tried the pub_sub_mqtt5 browser sample. Since I don't use the Cognito I switched the config setup to be the custom auth. Below what the createClient was changed to:

function createClient(): mqtt5.Mqtt5Client {
  let wsConfig: iot.MqttConnectCustomAuthConfig = {
    username: "",
    password: Buffer.from("", "base64"),
    tokenKeyName: "",
    tokenValue: "",
    tokenSignature:"",
    authorizerName: "",
  };

  let builder: iot.AwsIotMqtt5ClientConfigBuilder =
    iot.AwsIotMqtt5ClientConfigBuilder.newWebsocketMqttBuilderWithCustomAuth(
      "hostname",
      wsConfig,
    );

  let client: mqtt5.Mqtt5Client = new mqtt5.Mqtt5Client(builder.build());

  client.on("error", (error) => {
    log("Error event: " + error.toString());
  });

  client.on(
    "messageReceived",
    (eventData: mqtt5.MessageReceivedEvent): void => {
      log("Message Received event: " + JSON.stringify(eventData.message));
      if (eventData.message.payload) {
        log("  with payload: " + toUtf8(eventData.message.payload as Buffer));
      }
    },
  );

  client.on("attemptingConnect", (eventData: mqtt5.AttemptingConnectEvent) => {
    log("Attempting Connect event");
  });

  client.on("connectionSuccess", (eventData: mqtt5.ConnectionSuccessEvent) => {
    log("Connection Success event");
    log("Connack: " + JSON.stringify(eventData.connack));
    log("Settings: " + JSON.stringify(eventData.settings));
  });

  client.on("connectionFailure", (eventData: mqtt5.ConnectionFailureEvent) => {
    log("Connection failure event: " + eventData.error.toString());
  });

  client.on("disconnection", (eventData: mqtt5.DisconnectionEvent) => {
    log("Disconnection event: " + eventData.error.toString());
    if (eventData.disconnect !== undefined) {
      log("Disconnect packet: " + JSON.stringify(eventData.disconnect));
    }
  });

  client.on("stopped", (eventData: mqtt5.StoppedEvent) => {
    log("Stopped event");
  });

  return client;
}

I'd also added that in my vite project I tried the proposed solution in issue #474 but that also hasn't worked.

Possible Solution

My best guess as for a solution would be a configuration that needs to be changed. Im sort of at a loss here.

Additional Information/Context

No response

SDK version used

1.21.0

Environment details (OS name and version, etc.)

Sonoma 14.1 on m3 pro

[zammitjames]

This is also happening to me in NextJS or a standard static site.

[JoshuaKirby88]

Same issue here using the older mqtt.MqttClient() instead of mqtt5.Mqtt5Client() with the latest SDK.
I used to be on 1.19.6 and was working fine so I reverted back to that version which resolved this issue for me, but now I'm encountering a separate issue where connection.connect() which returns Promise never resolves.

I feel like it's unrelated to your authorization, because I had my custom authorization through lambda working fine, but was still seeing both issues.

[dominichadfield]

Likewise. Static site with react and vite. Only change across the whole stack is upgrading from 1.20.1 to 1.21.0

[Sangammm]

I'm facing the same issue with mqttClient. (not using mqtt5)

I was on version 1.19.5 and it worked till 29th Aug.
Since the launch of version 1.21.0 below code has stopped working.

Code

const mqttConnectionConfig = iot.AwsIotMqttConnectionConfigBuilder.new_default_builder()
  .with_client_id(clientId)
  .with_credentials(region, accessKeyId, secretAccessKey, sessionToken)
  .with_endpoint(endPoint)
  .with_clean_session(witCleanSession)
  .build();

console.log('MQTT ~ mqttConnectionConfig:', mqttConnectionConfig);
const client = new mqtt.MqttClient();
const mqttConnection = client.new_connection(mqttConnectionConfig);

ERROR

mqtt.MqttClient is not a constructor

Other info

Node version 14.18.0
NPM version 6.14.15
Webpack ^5.51.1

[NicoPowers]

I am also having this issue with SolidStart / SolidJS

[juancapua]

I'm having the same problem using react and vite

[bretambrose]

This is clearly due to the 5.x upgrade to the mqtt-js dependency. We will look into it tomorrow first thing.

[emog]

I'm having the same problem. Waiting @bretambrose to fix it tomorrow.

[thdxr]

if you need a reproduction this vite project has the issue: https://github.com/sst/ion/blob/dev/examples/aws-realtime/web/src/main.ts