Amplify and PubSub imports break React applications since `>4.3.30`

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

PubSub

Amplify Categories

No response

Environment information

I have tested this on MacOS, Windows and statically deployed to S3.

  System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 130.52 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.1 - /opt/homebrew/Cellar/node@16/16.13.1/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.1.2 - /opt/homebrew/Cellar/node@16/16.13.1/bin/npm
  Browsers:
    Chrome: 105.0.5195.52
    Safari: 15.6.1
  npmPackages:
    @aws-amplify/pubsub: ^4.5.2 => 4.5.2 
    aws-amplify: ^4.3.34 => 4.3.34 
    react: ^18.2.0 => 18.2.0 (18.1.0)
    react-dom: ^18.2.0 => 18.2.0 
    react-scripts: 5.0.1 => 5.0.1 
  npmGlobalPackages:
    gatsby-cli: 4.4.0
    n: 7.3.1
    npm: 8.5.5
    serverless: 2.59.0
    ts-node: 9.1.1
    typescript: 4.2.4
    yarn: 1.22.17

Describe the bug

An error is thrown that prevents anything from being rendered in React applications when importing the Amplify and AWSIoTProvider classes. This has happened since aws-amplify version >4.3.30.

Expected behavior

The application renders as it did before with aws-amplify version <4.3.30.

Reproduction steps

1. Clone https://github.com/louis-young/aws-amplify-import-issue-investigation.
2. Run npm install in the project root.
3. Run npm start in the project root.
4. Notice the broken application and the error message in the console.

Code Snippet

Minimal reproducible example: https://github.com/louis-young/aws-amplify-import-issue-investigation

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

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

Working import

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

Broken imports

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

...

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

...

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

...

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

Log output

index.ts:48 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (index.ts:48:1)
    at __extends (index.ts:48:1)
    at AWSAppSyncProvider.ts:24:1
    at ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncProvider.js (AWSAppSyncProvider.ts:204: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/PubSub.js (index.ts:16: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

As this occurred after a patch update, I’m not sure if this is a bug or if we’re doing something wrong.

I have reproduced this in our application, in a simple Create React App application and a Vite React application. These tools use different module bundlers that are written in different languages and work differently.

This happens with a multitude of import combinations, including using the monolith aws-amplify package and also the modular @aws-amplify/core and @aws-amplify/pubsub packages.

The only way I’ve been able to resolve this is by importing the deprecated default export of the Amplify class in a specific order, before importing the AWSIoTProvider class.

Weirdly, this works in the CodeSandbox runtime environment but not when running locally on a development server. It also doesn’t work after being built and served locally.

Please could you let me know what’s happening here?

Thanks in advance 🙂

[louis-young]

Hi @stocaaro, this appears to be fixed in the latest release 🎉 thanks for getting this sorted so quickly

[stocaaro]

Hello @louis-young,

The posted fix solved the problem. I used your steps above to validate with the caveat that I had to run npm update to get the updated versions of the library.

I’m going to resolve it. Feel free to reopen if you find there are still related issues. I had expected this fix to work for this related Vue issue (#10287), however am still able to reproduce the problem in Vue, so will be chasing that down further in that issue.

Regards, Aaron