vue + vite + pubsub issue with latest update

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• 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

No response

Environment information

# Put output below this line
  System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 21.74 GB / 31.27 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 6.14.17 - /usr/local/bin/npm
  Browsers:
    Chromium: 105.0.5195.102
    Firefox: 104.0
  npmPackages:
    @vitejs/plugin-vue: ^3.0.3 => 3.1.0 
    aws-amplify: ^4.3.35 => 4.3.35 
    vite: ^3.0.9 => 3.1.2 
    vue: ^3.2.38 => 3.2.39 
  npmGlobalPackages:
    @tailwindcss/language-server: 0.0.7
    @volar/server: 0.32.1
    live-server: 1.2.2
    neovim: 4.10.1
    npm-check-updates: 15.0.5
    sass: 1.53.0
    tree-sitter-cli: 0.20.6
    tree-sitter: 0.20.0
    typescript-language-server: 0.10.1
    typescript: 4.7.2
    vscode-langservers-extracted: 4.2.1

Describe the bug

I tried to implement the Pubsub module in a project. however i had problems using it in the dev build. However, the error “AMQJS0010E WebSocket is not supported by this browser” always came up(when i run ‘npm run build’, everything works fine). Anyone have any Idea? I tried installing the seperated ws npm module, but the error persist.

So I tried to update amplify and Vite. However, this created a new error that seems to be related to the latest amplify update? https://github.com/aws-amplify/amplify-js/pull/10298

After adding this line in the Code: ‘import { AWSIoTProvider } from ‘@aws-amplify/pubsub’;’ This error comes up: ‘Uncaught TypeError: Object.setPrototypeOf: expected an object or null, got undefined’ even if you remove the line and restart the vite server, the error persists, you then have to delete the node module folder and reinstall it.

For faster investigation i reproduced the bug in a fresh vue + amplify setup: https://github.com/jens3911/vue-test

Expected behavior

Import AWSIoTProvider and use it as expected in the Doc.

Reproduction steps

npm init vue@latest npm install aws-amplify npm i

Add to main.js import { Amplify, Auth, Hub, PubSub } from ‘aws-amplify’ import { AWSIoTProvider } from ‘@aws-amplify/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

[stocaaro]

Hello,

I’ve been troubleshooting this issue yesterday and today. I have a tested fix out for PR. I had attempted to resolve this in a prior change that solved for one of the repro cases, but not all. I have tested this change for both vue and react reproduction cases and expect it to resolve all the the vite build issues related to pubsub access.

Thanks, Aaron

[abdallahshaban557]

We have now released the fix in our latest version. Please inform us if you are still facing an issue!