aws-amplify
Aws Amplify PubSub Connection issue after latest version update
Before opening, please confirm:
- [X] I have searched for duplicate or closed issues and discussions.
- [X] I have read the guide for submitting bug reports.
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
JavaScript Framework
React
Amplify APIs
PubSub
Amplify Categories
No response
Environment information
# Put output below this line
Describe the bug
- Package.json "aws-amplify": "^5.0.8", "@aws-amplify/pubsub": "^5.0.8"
After the Package update, unable to make an MQTT connection. No errors were found while adding a plugin. No errors were found while subscribing to topics also with no success.
Expected behavior
MQTT connection should be made should receive data from topic
Reproduction steps
- Update @aws-amplify libraries
- Add plugin
- Call subscription method of PubSub.
Code Snippet
// Put your code below this line.
Log output
// Put your logs below this line
aws-exports.js
No response
Manual configuration
No response
Additional configuration
No response
Mobile Device
No response
Mobile Operating System
No response
Mobile Browser
No response
Mobile Browser Version
No response
Additional information and screenshots
No response
Hi @saharJ95, thank you for opening this issue. I have been able to consistently reproduce it, and I am discussing with the team.
One note is when I checked for the Hub events, I see ConnectionStateChange where connectionState: Connecting only when the page loads/refreshed, which may suggest that a connection isn't established.
Hub.listen('pubsub', (data) => {
const { payload } = data;
console.log(payload)
});
Will follow up once I have additional info, in the meantime - could you let me know what version you are upgrading from?
Okay, Thanks for your update... Currently I am using this version
"@aws-amplify/pubsub": "^4.5.3", "aws-amplify": "^4.3.35",
I've tried everything getting the Amplify PubSub working in my project but I think my problem may be related to this issue also. This is what I see with debug logging on:
Hi, @grahamhar
How are you making IoT pubsub connection using any version of 5.x.x? We are using code as attached in this issue but unable to do so.
Thanks
I'm using 5.0.7 and saw the reported issue when updating to to 5.0.8
Hey, @grahamhar I tried version 5.0.0 of amplify and pubsub BUT the issue is the same for me unable to subscribe. Can you please tell me if there are any changes regarding the implementation ?
Hi, @grahamhar
How are you making IoT pubsub connection using any version of
5.x.x? We are using code as attached in this issue but unable to do so.Thanks I can't share the full code as it is in a private repo, I will try to describe what I do. I also made a few code changes so will retry with the latest 5 version. I have cognito auth configured with a role allowing connect to iot for both the auth and unauthorised IAM roles. Then in the component that has the subscription in the component did mount I setup the pubsub.subscribe inside the then of a auth.current credentials call.
If I recall correctly you may need to assign the thing policy to the cognito identity pool ID for each user. My unauth users just work.
If I get time I will try to extract the code snippet into a gist
Thanks,
We followed same steps defined here PubSub and is working before version 5 but not for any version of 5 or above. As you mentioned its working for you for version 5.0.7
Hi @saharJ95 - after doing some additional testing on this, I am not able to reproduce this on a project setup with npx create-react-app but consistently seeing the issue on a sample project setup with vite. Any additional information regarding how your project is setup would be helpful here.
cc. @grahamhar @briankoksal @HAK-CODE
Hello @saharJ95,
I've been working with @nadetastic to try to figure out why this setup isn't able to form a connection to IoT. They had a sample app that reproduces what you are seeing, where my attempt to reproduce ended with an app that is able to connect. The difference between our apps is how we resolved the issues where global is missing when using Vite.
I had followed the instructions from the Amplify UI troubleshooting steps, and my app overwrote global in index.html.
The other workaround recommend configuring global: {}, in vite.config.js.
When global is setup in the second way in vite.config.js, I see the error, but when I remove this and configure it in the index.html way recommended in the Amplify UI steps, then the subscription connects as expected.
Can you test this to see if it works in your application?
Thanks, Aaron
Hi @stocaaro, I am using npx create-react-app
It works fine below 5.x.x. We are not using Vite, so the above solution is not helpful for me.
@stocaaro
for any version of 5.x.x its not even giving any error output, what causing this issue.
Sorry for the misunderstanding. I'm not sure how I got off on that tangent with Vite.
Re-reading the above, is this a new application that you are trying to get working for the first time or an existing app where it stops working when upgrading to 5.x.x?
Above, @nadetastic provided details on watching the connection state by subscribe to Hub updates. It looks like @briankoksal had done this and turned on error logging. The error appears to be the type of thing I would expect when I miss a step in the IAM/IoT Policy setup steps. Is this consistent with the errors you are seeing @saharJ95 and @HAK-CODE ?
Working through the PubSub Getting Started guide, I am able to get a CRA based sample app working. Are there any steps or details in you setup that might be different in a way that would help me reproduce the issue you're seeing?
Hi @stocaaro,
Thanks for your response as we migrated from 4.5.3 to 5.0.8 (also tested for 5.0.7) so steps remains same and code snippet is attached @saharJ95
- Configuration as code attached above
- Add Iot Policy as mentioned here Iot Policy
- Subscribe to topic(s) Subscribe So in short we haven’t changed any code assuming interface remains same, one thing weird is we are not getting errors in console as not even a network call that shows a mqqt attempt made.
If you could share your code snippet, we can reverify if we are missing and new or modified code. thanks
@HAK-CODE here's a sample project using CRA that works as expected for me [1].
Can you also verify the following:
- You previously added the needed IAM permissions to your Authenticated role [2]
- You are using the APP as a signed in Cognito user
[1] https://github.com/nadetastic/cra-amplified [2] https://docs.amplify.aws/lib/pubsub/getting-started/q/platform/js/#step-3-allow-the-amazon-cognito-authenticated-role-to-access-iot-services
Hi @nadetastic , Just a dummy question where should i add user identity id, or security token to make access to AWS Iot core as for now i am unable to make it work. Thanks
Sorry for the misunderstanding. I'm not sure how I got off on that tangent with Vite.
Re-reading the above, is this a new application that you are trying to get working for the first time or an existing app where it stops working when upgrading to
5.x.x?Above, @nadetastic provided details on watching the connection state by subscribe to
Hubupdates. It looks like @briankoksal had done this and turned on error logging. The error appears to be the type of thing I would expect when I miss a step in the IAM/IoT Policy setup steps. Is this consistent with the errors you are seeing @saharJ95 and @HAK-CODE ?Working through the PubSub Getting Started guide, I am able to get a CRA based sample app working. Are there any steps or details in you setup that might be different in a way that would help me reproduce the issue you're seeing?
Just to follow up on my issue. I recreated my Amplify react project with 5.0.8 and followed the PubSub example and was able to subscribe to the MQTT events successfully. My issue was due to permissions like you said. I did not follow step 3 of the pubsub guide correctly the first time around. Thanks for your help.
@HAK-CODE there are two things you need to do in order to have permissions:
First, you would need to create an IoT policy through the IoT core console as described at [1], then attach this newly created policy to the Cognito Identity that your app uses. The Amplify documentation shows how you can retrieve the Identity ID, then use the AWS CLI to attach it the created policy to the Cognito Identity [2]
Then, for the AuthRoles and UnAuthRoles created by Amplify, you need to give them IoT permissions as described here [3].
[1] https://docs.amplify.aws/lib/pubsub/getting-started/q/platform/js/#step-1-create-iam-policies-for-aws-iot [2] https://docs.amplify.aws/lib/pubsub/getting-started/q/platform/js/#step-2-attach-your-policy-to-your-amazon-cognito-identity [3] https://docs.amplify.aws/lib/pubsub/getting-started/q/platform/js/#step-3-allow-the-amazon-cognito-authenticated-role-to-access-iot-services
Let me know if you would like for me to further clarify.
Hi @nadetastic, I tried the sample project with my configs and it works fine but It not working in my project with amplify 5.X.x. I tried to copy your codes but unfortunately, results are the same for me
This is my index.js file
File where I am using PubSub
After debugging... I think there is an issue in adding AWSIoTProvider pluggable... As you can see PubSub.Subscribe(..) is not giving any error/success while publishing the message I am getting Could not find provider named AWSIoTProvider error
or pubSub object is null in my case after adding AWSIoTProvider
I am unable to understand the issue because it works completely fine with "@aws-amplify/pubsub": "^4.5.3", "aws-amplify": "^4.3.35",
@saharJ95 could you try removing your node_modules and re-installing with the new version of aws-amplify?
I've come across a few cases recently with issues when upgrading, and doing this was the fix
I am having same issue after upgrade
node version = v18.13.0
package.json
{
"name": "pragmatic-dashboard",
"version": "6.4.0",
"private": true,
"dependencies": {
"@aws-amplify/pubsub": "^5.0.8",
"@casl/ability": "^5.4.3",
"@casl/react": "2.3.0",
"@elastic/charts": "^46.11.0",
"@elastic/datemath": "^5.0.3",
"@elastic/eui": "^57.0.0",
"@emotion/react": "^11.7.1",
"@fullcalendar/core": "5.10.1",
"@fullcalendar/daygrid": "5.10.1",
"@fullcalendar/interaction": "5.10.1",
"@fullcalendar/list": "5.10.1",
"@fullcalendar/react": "5.10.1",
"@fullcalendar/timegrid": "5.10.1",
"@fullcalendar/timeline": "5.10.1",
"@hookform/resolvers": "2.8.5",
"@reduxjs/toolkit": "^1.8.1",
"@rjsf/core": "^4.2.0",
"@types/react-transition-group": "^4.4.4",
"@uppy/react": "2.1.2",
"animate.css": "4.1.1",
"antd": "^4.17.3",
"apexcharts": "^3.36.3",
"aws-amplify": "^5.0.8",
"babel-plugin-formatjs": "^10.3.20",
"bootstrap": "^5.1.3",
"bs-stepper": "1.7.0",
"chart.js": "^3.7.1",
"chroma-js": "^2.1.2",
"classnames": "^2.3.1",
"cleave.js": "1.6.0",
"draft-js": "0.11.7",
"draftjs-to-html": "0.9.1",
"file-saver": "2.0.5",
"flat": "^5.0.2",
"flatpickr": "^4.6.13",
"history": "^5.3.0",
"html-to-draftjs": "1.5.0",
"intl-messageformat": "9.10.0",
"jquery": "3.6.0",
"jsonwebtoken": "8.5.1",
"leaflet": "1.7.1",
"lodash": "^4.17.21",
"mathjs": "^11.5.0",
"moment": "^2.29.3",
"nouislider": "^15.5.0",
"nouislider-react": "3.4.1",
"object-hash": "^2.2.0",
"patch-package": "^6.5.0",
"postcss-rtl": "1.7.3",
"prismjs": "1.25.0",
"prop-types": "^15.7.2",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-chartjs-2": "^4.0.0",
"react-contexify": "5.0.0",
"react-copy-to-clipboard": "5.0.4",
"react-country-flag": "3.0.2",
"react-custom-scroll": "^4.4.0",
"react-data-table-component": "7.4.5",
"react-dom": "18.2.0",
"react-draft-wysiwyg": "1.14.7",
"react-dropdown-tree-select": "^2.7.1",
"react-feather": "~2.0.9",
"react-flatpickr": "3.10.7",
"react-hook-form": "7.22.1",
"react-intl": "5.23.0",
"react-json-view": "^1.21.3",
"react-jsonschema-form": "^1.8.1",
"react-leaflet": "3.2.2",
"react-paginate": "8.1.0",
"react-perfect-scrollbar": "1.5.8",
"react-player": "2.9.0",
"react-rating": "2.0.5",
"react-redux": "7.2.6",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-scroll-up": "1.3.7",
"react-select": "5.2.1",
"react-shepherd": "3.3.6",
"react-slidedown": "2.4.6",
"react-sortablejs": "^6.0.0",
"react-toastify": "^8.1.0",
"react-transition-group": "^4.4.2",
"react-world-flags": "^1.5.1",
"reactstrap": "9.0.1",
"recharts": "2.1.8",
"redux": "4.1.2",
"redux-debounced": "0.5.0",
"redux-thunk": "2.4.1",
"reselect": "^4.1.5",
"rxjs": "^7.4.0",
"sass": "^1.45.0",
"screenfull": "6.0.0",
"sortablejs": "^1.15.0",
"styled-components": "5.3.3",
"sweetalert2": "11.3.0",
"sweetalert2-react-content": "4.2.0",
"swiper": "7.3.2",
"uppy": "2.3.1",
"webpack": "5.65.0",
"wnumb": "1.2.0",
"xlsx": "0.17.4",
"yarn": "1.22.17",
"yup": "0.32.11"
},
"scripts": {
"postinstall": "patch-package",
"start": "react-scripts start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject",
"lint": "eslint src/**/*.js",
"lint:fix": "eslint src/**/*.js --fix",
"lint-staged": "lint-staged"
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"@types/sortablejs": "^1.10.7",
"crypto-browserify": "^3.12.0",
"eslint": "^8.4.1",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-react": "^7.27.1",
"lint-staged": "^12.1.2",
"postcss": "^7.0.39",
"pre-commit": "^1.2.2",
"process": "^0.11.10",
"react-app-alias": "^2.2.2",
"react-app-rewire-postcss": "^3.0.2",
"react-app-rewired": "^2.2.1",
"stream-browserify": "^3.0.0",
"util": "^0.12.4"
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
"homepage": "",
"lint-staged": {
"src/**/*.js": "eslint"
},
"pre-commit": "lint-staged"
}
index.js
import ReactDOM from 'react-dom/client';
import { Auth, Amplify } from 'aws-amplify';
import { AWSIoTProvider } from '@aws-amplify/pubsub/lib/Providers';
Amplify.configure({
aws_project_region: 'us-east-2',
aws_cognito_identity_pool_id:
'us-east-2:dummyuuid',
aws_cognito_region: 'us-east-2',
aws_user_pools_id: 'us-east-2_dummy',
aws_user_pools_web_client_id: 'dummy'
});
Amplify.addPluggable(
new AWSIoTProvider({
aws_pubsub_region: 'us-east-2',
aws_pubsub_endpoint:
'wss://dummyendpoint-ats.iot.us-east-2.amazonaws.com/mqtt'
})
);
console.log(Amplify);
console.log(Amplify.PubSub);
async function signIn () {
try {
const user = await Auth.signIn('{[email protected]}', 'somedummypassword');
console.log(user);
} catch (error) {
console.log('error signing in', error);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
'hello'
)
signIn()
Tried different combination but it seems AWS Iot provider is not adding as pluggable.
@saharJ95 / @HAK-CODE ,
In other cases where PubSub hasn't existed to receive the addPluggable call configuring IoT, I've found that this is caused by tree shaking by the build.
As an experiment, can you import PubSub and do something like console.log(PubSub) before calling addPluggable?
This isn't a pattern I would recommend, but it testing like this would tell us if the build system is doing something extra smart that is causing the behavior you're observing.
Thanks, Aaron
Hey @nadetastic , @stocaaro , Thank you for your help. The Plugin AWS-SDK was conflicting with our changes. After deleting that package PubSub works fine. Thanks,
Hi @saharJ95 I am glad you were able to resolve this and thank you for sharing your findings.
I will re-open this issue so that I may follow up with the other folks facing this issue (@HAK-CODE )
Sorry for the misunderstanding. I'm not sure how I got off on that tangent with Vite.
Re-reading the above, is this a new application that you are trying to get working for the first time or an existing app where it stops working when upgrading to
5.x.x?Above, @nadetastic provided details on watching the connection state by subscribe to
Hubupdates. It looks like @briankoksal had done this and turned on error logging. The error appears to be the type of thing I would expect when I miss a step in the IAM/IoT Policy setup steps. Is this consistent with the errors you are seeing @saharJ95 and @HAK-CODE ?Working through the PubSub Getting Started guide, I am able to get a CRA based sample app working. Are there any steps or details in you setup that might be different in a way that would help me reproduce the issue you're seeing?
This was my exact problem in my reactJS app + vite. Once I updated my index.html + vite.config as suggested I was able to connect, publish, and subscribe. Thank you.
Hello @saharJ95,
I've been working with @nadetastic to try to figure out why this setup isn't able to form a connection to IoT. They had a sample app that reproduces what you are seeing, where my attempt to reproduce ended with an app that is able to connect. The difference between our apps is how we resolved the issues where
globalis missing when using Vite.I had followed the instructions from the Amplify UI troubleshooting steps, and my app overwrote
globalinindex.html.The other workaround recommend configuring
global: {},invite.config.js.When global is setup in the second way in
vite.config.js, I see the error, but when I remove this and configure it in theindex.htmlway recommended in the Amplify UI steps, then the subscription connects as expected.Can you test this to see if it works in your application?
Thanks, Aaron
Hi @stocaaro, I have the same issue, When I try first configuration, I was able to connect, but after a few seconds connection interrupts and gives errorcode: 8. I'm using vite and amplify 5.0.11. Do you have any advice?
