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

[bretambrose]

There seems to be some baffling issues with mqtt-js 5.x and webpack. We are likely going to downgrade the CRT dependency and then rollback the upgrade within the CRT.

[byoung96]

There seems to be some baffling issues with mqtt-js 5.x and webpack. We are likely going to downgrade the CRT dependency and then rollback the upgrade within the CRT.

That would be great so that we have atleast something that workable in the meantime.

[bretambrose]

The previous release is workable.

[sfod]

It seems, the issue is in the published MQTT-js package. mqttjs/MQTT.js#1934 and embroider-build/ember-auto-import#608 (comment) provide more details.
There is a workaround provided there, but we need to assess it before applying.

For now, we reverted the MQTT-js version update in the new release: https://github.com/aws/aws-iot-device-sdk-js-v2/releases/tag/v1.21.1