aws-iot-device-sdk-js-v2 on React breaks the app

0

React app breaks after installing aws-iot-device-sdk-v2

All I do is

Create a new app:

npx create-react-app my-app

install the the library:

cd my-app

npm install aws-iot-device-sdk-js-v2

include the library to use in the app:

import { mqtt } from 'aws-iot-device-sdk-v2';

and the app breaks with the error:

constants.js:46 Uncaught ReferenceError: Buffer is not defined
    at ./node_modules/mqtt-packet/constants.js (constants.js:46:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/mqtt-packet/parser.js (parser.js:4:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/mqtt-packet/mqtt.js (mqtt.js:1:1)
    at options.factory (react refresh:6:1)

I want to create a react app that subscribes to an AWS MQTT topic to get updates in real time. But I haven't been able to find a proper example to do this.

any ideas? thanks

mvp
asked a year ago221 views
1 Answer
1

This example is not specific to React but shows how to use the AWS IoT Device SDK v2 for a browser implementation: https://github.com/aws/aws-iot-device-sdk-js-v2/tree/main/samples/browser/custom_authorizer_connect

Check in particular this line https://github.com/aws/aws-iot-device-sdk-js-v2/blob/e057cbfbe945dd9bb44ac41283eb8fe0deec8ccb/samples/browser/custom_authorizer_connect/webpack.config.js#L6 which selects the right version of the SDK so that can build correctly for a browser.

AWS
EXPERT
answered a year ago
  • Thank you Massimiliano for your answer. The aws.iot-device-sdk-js-v2 doesn't have good documentation. I couldn't find any example for a react application and also in order to install it on a React app without breaking it I had to do some workaround on the app. configuration and stuff. it shouldn't be that way. So I end up using Amplify PubSub. thanks

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions