[SOLVED] Appsync Subscriptions do not work with modular AWS Amplify packages

Appsync Subscriptions do not work with modular AWS Amplify packages

I do have a React application where I want to replace the aws-amplify monolithic package with the module @aws-amplify/<package-name> ones.

Please note that everything is working if I use the monolithic package.

I need: Auth, GraphQL API with subscriptions

So I imported the latest modular packages:

"@aws-amplify/core": "^4.7.2"
"@aws-amplify/api": "^4.0.51"
"@aws-amplify/auth": "^4.6.4"
"@aws-amplify/pubsub": "^4.5.1" // This seems to be needed for GraphQL subscriptions

I do call the register function of Amplify since just us importing them would not work. Afterwards I call the config function on core which then calls the registered modules with the configuration:

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)
            }
        },
    }
});

The PubSub module then tries to instantiate a MQTT IoT client which fails:

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)

I mean I do not need an IoT Client and I do not understand that this is so badly documented:

The AWS configuration property is a shitshow: It allows scoped configuration but that scoped config does not work when using the modular packages (they do some cross lookups on other properties and when they are scoped they cannot find them). Why do not scrap the scoped config at all?
Dependencies are not documented. Nothing says "If you use subscriptions you need to have PubSub as well"
Why does the PubSub instance instantiate a MQTT IoT Client?

Update: I created an issue on Github: https://github.com/aws-amplify/amplify-js/issues/10260

Solution