aws-amplify PubSub.publish TypeError: Cannot read property 'byteLength' of undefined

Question

I am trying to access aws-amplify PubSub.publish to publish to a topic in AWS IoT Core. I am using version "aws-amplify": "2.1.0".

handleSubmit = async () => {
    await PubSub.publish('topic', { msg: 'Hello to all subscribers!' });
};

My aws-exports.js file is configured as following.

const awsmobile = {
    "aws_project_region": "us-east-2",
    "aws_cognito_region": "us-east-2",
    "aws_user_pools_id": "poolid",
    "aws_user_pools_web_client_id": "webclientid",
    "aws_cognito_identity_pool_id": "identitypoolid",
    "oauth": {}
};

export default awsmobile;

Clicking the button calls handleSubmit function and PubSub.publish gives the following error.

Uncaught (in promise) TypeError: Cannot read property 'byteLength' of undefined
    at Object.isEmptyData (browserHashUtils.js:30)
    at Hmac.push../node_modules/aws-sdk/lib/browserHmac.js.Hmac.update (browserHmac.js:34)
    at encrypt (Signer.js:50)
    at get_signing_key (Signer.js:222)
    at Function.Signer.signUrl (Signer.js:374)
    at AWSIoTProvider.<anonymous> (AWSIotProvider.js:233)
    at step (AWSIotProvider.js:152)
    at Object.next (AWSIotProvider.js:83)
    at fulfilled (AWSIotProvider.js:37)

Answer 1

This happened due to the Amplify PubSub Provider was not configured properly.

My erroneous configuration:

Amplify.addPluggable(new AWSIoTProvider({
  aws_pubsub_region: process.env.region,
  aws_pubsub_endpoint: `wss://${process.env.REACT_APP_MQTT_ID}.iot.${process.env.REACT_APP_REGION}.amazonaws.com/mqtt`,
}));

Here I have not set the process.env.region env variable. This caused the error. Changing it to proper env variable (process.env.REACT_APP_REGION) fixed the issue.

Working configuration:

Amplify.addPluggable(new AWSIoTProvider({
  aws_pubsub_region: process.env.REACT_APP_REGION,
  aws_pubsub_endpoint: `wss://${process.env.REACT_APP_MQTT_ID}.iot.${process.env.REACT_APP_REGION}.amazonaws.com/mqtt`,
}));