GraphQL subscriptions fail when using modular api and pubsub packages

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

React

Amplify APIs

Authentication, GraphQL API, PubSub

Amplify Categories

auth, api

Environment information

# Put output below this line
System:
    OS: Windows 10 10.0.19044
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 6.71 GB / 31.95 GB
  Binaries:
    Node: 16.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.2.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 7.21.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 104.0.5112.101
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.63)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @aws-amplify/api: ^4.0.51 => 4.0.51
    @aws-amplify/auth: ^4.6.4 => 4.6.4
    @aws-amplify/core: ^4.7.2 => 4.7.2
    @aws-amplify/pubsub: ^4.5.1 => 4.5.1
    @casl/ability: ^5.4.4 => 5.4.4
    @casl/ability/extra:  undefined ()
    @casl/react: ^3.0.0 => 3.0.1
    @craco/craco: ^6.4.3 => 6.4.5
    @headlessui/react: ^1.6.6 => 1.6.6
    @heroicons/react: ^1.0.6 => 1.0.6
    @hookform/resolvers: 2.8.0 => 2.8.0
    @juggle/resize-observer: ^3.3.0 => 3.4.0
    @mapbox/mapbox-gl-style-spec:  13.26.0
    @nantis/grafana-data: * => 0.0.0
    @nantis/gridknight-measurements: * => 0.0.0
    @nantis/gridknight-styles: * => 0.0.0
    @nantis/gridknight-ui: * => 0.0.0
    @reduxjs/toolkit: ^1.8.5 => 1.8.5
    @reduxjs/toolkit-query:  1.0.0
    @reduxjs/toolkit-query-react:  1.0.0
    @swc/core: ^1.2.140 => 1.2.242
    @swc/jest: ^0.2.17 => 0.2.22
    @tailwindcss/forms: ^0.5.2 => 0.5.2
    @testing-library/dom: ^8.11.3 => 8.17.1
    @testing-library/jest-dom: ^5.16.2 => 5.16.5
    @testing-library/react: ^13.3.0 => 13.3.0
    @testing-library/user-event: ^13.5.0 => 13.5.0
    @types/jest: ^27.0.3 => 27.5.2 (28.1.8)
    @types/leaflet: ^1.7.11 => 1.7.11
    @types/node: ^12.0.0 => 12.20.55 (18.7.13)
    @types/react: ^18.0.15 => 18.0.17
    @types/react-date-range: ^1.4.4 => 1.4.4
    @types/react-dom: ^18.0.6 => 18.0.6
    autoprefixer: ^10.0.2 => 10.4.8
    class-validator:  1.0.0
    computed-types:  1.0.0
    cuid: ^2.1.8 => 2.1.8
    date-fns: ^2.28.0 => 2.29.2
    history: ^5.0.0 => 5.3.0
    i18next: ^21.8.9 => 21.9.1
    i18next-browser-languagedetector: ^6.1.4 => 6.1.5
    io-ts:  1.0.0
    jest: ^27.4.5 => 27.5.1
    joi:  1.0.0
    leaflet: ^1.8.0 => 1.8.0
    mapbox-gl: ^2.8.2 => 2.10.0
    nope:  1.0.0
    postcss: ^8 => 8.4.16 (7.0.39)
    react: ^18.2.0 => 18.2.0
    react-date-range: ^1.4.0 => 1.4.0
    react-dom: ^18.2.0 => 18.2.0
    react-error-boundary: ^3.1.4 => 3.1.4
    react-hook-form: ^7.33.1 => 7.34.2
    react-i18next: ^11.17.0 => 11.18.4
    react-leaflet: ^4.0.1 => 4.0.2
    react-redux: ^8.0.2 => 8.0.2
    react-router-dom: ^6.3.0 => 6.3.0
    react-scripts: ^5.0.1 => 5.0.1
    react-spring: ^9.5.2 => 9.5.2
    source-map-explorer: ^2.5.2 => 2.5.2
    superstruct:  1.0.0
    tailwindcss: ^3.1.1 => 3.1.8
    typanion:  1.0.0
    typescript: ^4.7.4 => 4.7.4
    vest:  1.0.0
    web-vitals: ^1.0.1 => 1.1.2
    yup: 0.32.9 => 0.32.9 (1.0.0)
    zen-observable-ts: ^0.8.0 => 0.8.21 (0.8.19)
    zod:  1.0.0
  npmGlobalPackages:
    @aws-amplify/cli: 4.37.1
    @maizzle/cli: 1.4.0
    agentkeepalive: 4.1.4
    aws-cdk-lib: 2.2.0
    create-react-app: 5.0.0
    full-icu: 1.4.0
    live-server: 1.2.1
    npm-windows-upgrade: 6.0.1
    npm: 7.21.0
    pkg: 5.4.1
    yarn: 1.22.17

Describe the bug

When using the modular packages I run into an error where I cannot use GraphQL subscriptions anymore. I am trying to replace the monolithic aws-amplify package. The setup works when using the monolithic package.

"@aws-amplify/core": "^4.7.2"
"@aws-amplify/api": "^4.0.51"
"@aws-amplify/auth": "^4.6.4"
"@aws-amplify/pubsub": "^4.5.1" 

To configure the App I do:

Amplify.register(Auth)
Amplify.register(API)
Amplify.register(PubSub)

Amplify.configure({
    // AUTH
    aws_cognito_region: region, // (required) - Region where Amazon Cognito project was created
    aws_user_pools_id:  userPoolId, // (optional) -  Amazon Cognito User Pool ID
    aws_user_pools_web_client_id: userPoolClientId, // (optional) - Amazon Cognito App Client ID (App client secret needs to be disabled)
    aws_cognito_identity_pool_id: identityPoolRef, // (optional) - Amazon Cognito Identity Pool ID
    aws_mandatory_sign_in: "disabled", // (optional) - Users are not allowed to get the aws credentials unless they are signed in

    // API
    aws_appsync_region: region, // (optional) - AWS AppSync region
    aws_appsync_graphqlEndpoint: graphqlUrl, // (optional) - AWS AppSync endpoint
    // Seems to be more a kind of default auth type, you can override it per query, see create tenant
    aws_appsync_authenticationType: "AMAZON_COGNITO_USER_POOLS", // (optional) - Primary AWS AppSync authentication type

    // Usually we send only the access key which does not contain the username and other things encoded in the JWT
    // So we send our "own" header with the id token
    API: {
        graphql_headers: async () => {
            try {
                const session = await Auth.currentSession();
                if(session) {
                    return {
                        Authorization: session.getIdToken().getJwtToken(),
                    };
                }
            } catch(e) {
                console.warn(e)
            }
        },
    }
});

Note: The normal graphql calls do work, auth also works.

This results in an issue where the app tries to load an IoTMQTT Client. I am not sure if the root cause is in the webpack or in the library itself. The library fails to extend the MqttOverWSProvider class.

index.ts:939 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (index.ts:939:1)
    at __extends (index.ts:939:1)
    at AWSIotProvider.ts:23:1
    at ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSIotProvider.js (AWSIotProvider.ts:59:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/index.js (constants.ts:100:1)
    at options.factory (react refresh:6:1)

Expected behavior

I expect subscriptions to work

Reproduction steps

see above

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

index.ts:939 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (index.ts:939:1)
    at __extends (index.ts:939:1)
    at AWSIotProvider.ts:23:1
    at ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSIotProvider.js (AWSIotProvider.ts:59:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/index.js (constants.ts:100:1)
    at options.factory (react refresh:6:1)

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

[pfried]

I can confirm the fix, thank you for the work!

[stocaaro]

The fix has been released and I have confirmed that the issue is resolved for the provided sample application. Thank you for the extra work to help me identify and test the fix for this!