aws-amplify / aws-amplify/docs

Amplify PubSub - Production builds do not open websocket

Open
#7,554 4 comments 0 reactions 1 assignee Claimed by @cwomack View on GitHub
amplify/js PubSub
Dominant language
MDX
Stars
506
Forks
1.1k
Avg merge
3h 14m
Merged PRs (30d)
1

Description

### Before opening, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-js/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-js/discussions).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-js/blob/main/CONTRIBUTING.md#bug-reports).
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

### JavaScript Framework

Vue

### Amplify APIs

PubSub

### Amplify Categories

Not applicable

### Environment information

```
# Put output below this line

```

### Describe the bug

This may be related to aws-amplify/amplify-js#10829.
It could be related to my implementation of the Amplify initialization in Quasar.

When using the PubSub module, websockets are not opened by the framework with production builds. There is no error message.
Development builds works properly.

### Expected behavior

Websockets should be opened on both development build and production builds.

### Reproduction steps

I have a Vue.js application, built with Vite and Quasar. Versions are:

```json
"dependencies": {
"@aws-amplify/ui-vue": "^3.1.7",
"@quasar/extras": "^1.0.0",
"aws-amplify": "^5.0.14",
"graphql-tag": "^2.12.6",
"pinia": "^2.0.28",
"quasar": "^2.6.0",
"vue": "^3.2.45",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@quasar/app-vite": "^1.0.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.10.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^9.0.0",
"postcss": "^8.4.14",
"prettier": "^2.5.1"
},
```

I setup Amplify during the Quasar boot and the Amplify init looks like this:

```javascript
import { boot } from "quasar/wrappers";

import { Amplify } from "aws-amplify";
import { AWSIoTProvider } from "@aws-amplify/pubsub/lib/Providers";

export default boot(() => {
Amplify.configure({
Auth: {
identityPoolId: '',
region: '',
identityPoolRegion: '',
userPoolId: '',
userPoolWebClientId: '',
mandatorySignIn: true,
}
});

Amplify.addPluggable(
new AWSIoTProvider({
aws_pubsub_region: '....',
aws_pubsub_endpoint: '....'
})
);
});

```

And the subscription is performed like this:

```javascript
PubSub.subscribe('my-topic').subscribe({
next: (data) => handleNotification(data),
error: (error) => console.error(error),
close: () => console.debug("Subscription closed"),
complete: () => console.debug("Subscription complete"),
});
```

Also, I have in my index.html and quasar.config.js the magic lines to make Amplify work with production packaging:

index.html
```html

window.global = window;
var exports = {};

```

quasar.config.js:
```javascript
extendViteConf(viteConf, { isClient, isServer }) {
Object.assign(viteConf.resolve.alias, {
"./runtimeConfig": "./runtimeConfig.browser",
});
```

When testing the application with `quasar dev`, the subscription is performed.
With a production build, the websocket request is never opened by the web browser, but no error message is shown.

### Additional information and screenshots

With `Amplify.Logger.LOG_LEVEL = 'DEBUG'` activated, production builds have no reference to MqttOverWSProvider in the logs, when dev builds properly show the MqttOverWSProvider, and it work.

I found a possible workaround, it seems that adding the AWSIoTProvider pluggable directly using the PubSub API instead of using the Amplify API API works:

```javascript
PubSub.addPluggable(
new AWSIoTProvider({
aws_pubsub_region: '....',
aws_pubsub_endpoint: '....'
})
);
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.