Amplify-js: Build fails due to missing dependency in @aws-amplify/pubsub

[getsbydev]

Describe the bug
We're using @aws-amplify/api-graphql, @aws-amplify/auth, @aws-amplify/core and @aws-amplify/storage in our react app.
All of the todays builds in our CI/CD fails due to an unresolved dependency in the @aws-amplify/pubsub package.

To Reproduce
Steps to reproduce the behavior:

1. create a new react app
2. add these dependencies:
   @aws-amplify/api-graphql
@aws-amplify/auth
@aws-amplify/core
@aws-amplify/storage
3. import API from "@aws-amplify/api-graphql" in App.js;
4. npm start or npm run build
5. See error
   Failed to compile. ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js Module not found: Can't resolve 'isomorphic-ws' in '/node_modules/@aws-amplify/pubsub/lib-esm/Providers'

Expected behavior
The app builds and/or runs

Screenshots

[sammartinez]

@getsbydev Which version of the repository are you using? Can you please run the following command inside your project and copy/paste the output into the codeblock:

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

[getsbydev]

System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
    Memory: 6.11 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.3 - /usr/local/bin/node
    Yarn: 1.22.1 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 85.0.4183.83
    Firefox: 79.0
    Safari: 13.1.2
  npmPackages:
    @aws-amplify/api-graphql: ^1.0.18 => 1.1.7 
    @aws-amplify/auth: ^3.2.9 => 3.3.6 
    @aws-amplify/core: ^3.2.9 => 3.4.7 
    @aws-amplify/storage: ^3.2.12 => 3.2.14 
    @commitlint/cli: ^9.1.1 => 9.1.2 
    @commitlint/config-conventional: ^9.1.1 => 9.1.2 
    @graphql-codegen/cli: ^1.15.0 => 1.17.8 
    @graphql-codegen/introspection: ^1.15.0 => 1.17.8 
    @graphql-codegen/typescript: ^1.15.0 => 1.17.9 
    @graphql-codegen/typescript-document-nodes: ^1.15.3 => 1.17.8 
    @graphql-codegen/typescript-operations: ^1.15.0 => 1.17.8 
    @graphql-codegen/typescript-react-apollo: ^2.0.5 => 2.0.6 
    @sentry/react: ^5.22.1 => 5.22.3 
    @stripe/react-stripe-js: ^1.1.2 => 1.1.2 
    @stripe/stripe-js: ^1.7.0 => 1.9.0 
    @testing-library/jest-dom: ^5.11.2 => 5.11.4 
    @testing-library/react: ^10.4.7 => 10.4.9 
    @testing-library/user-event: ^12.0.17 => 12.1.3 
    @types/googlemaps: ^3.39.13 => 3.39.13 
    @types/jest: ^26.0.7 => 26.0.12 
    @types/node: ^14.0.1 => 14.6.2 
    @types/react: ^16.9.25 => 16.9.49 
    @types/react-dom: ^16.9.5 => 16.9.8 
    @types/react-helmet: ^6.0.0 => 6.1.0 
    @types/react-phone-number-input: ^3.0.5 => 3.0.5 
    @types/react-qr-reader: ^2.1.3 => 2.1.3 
    @types/react-router-dom: ^5.1.5 => 5.1.5 
    @types/react-virtualized-auto-sizer: ^1.0.0 => 1.0.0 
    @types/react-window: ^1.8.2 => 1.8.2 
    @types/recoil: ^0.0.1 => 0.0.1 
    @typescript-eslint/eslint-plugin: ^4.0.1 => 4.0.1 
    @typescript-eslint/parser: ^4.0.1 => 4.0.1 
    autoprefixer: ^9.7.6 => 9.8.6 
    date-fns: ^2.12.0 => 2.16.1 
    eslint-config-prettier: ^6.11.0 => 6.11.0 
    eslint-plugin-prettier: ^3.1.3 => 3.1.4 
    eslint-plugin-react: ^7.20.0 => 7.20.6 
    graphql: ^15.0.0 => 15.3.0 
    graphql-tag: ^2.10.3 => 2.11.0 
    husky: ^4.2.5 => 4.2.5 
    i18next: ^19.5.2 => 19.7.0 
    i18next-browser-languagedetector: ^6.0.0 => 6.0.1 
    i18next-http-backend: ^1.0.16 => 1.0.18 
    lint-staged: ^10.2.7 => 10.2.13 
    postcss-cli: ^7.1.1 => 7.1.2 
    prettier: ^2.0.5 => 2.1.1 
    query-string: ^6.13.1 => 6.13.1 
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-ga: ^3.1.2 => 3.1.2 
    react-helmet: ^6.1.0 => 6.1.0 
    react-i18next: ^11.7.0 => 11.7.2 
    react-phone-number-input: ^3.0.25 => 3.0.25 
    react-qr-reader: ^2.2.1 => 2.2.1 
    react-router-dom: ^5.2.0 => 5.2.0 
    react-schemaorg: ^1.1.0 => 1.2.0 
    react-scripts: 3.4.1 => 3.4.1 
    react-virtualized-auto-sizer: ^1.0.2 => 1.0.2 
    react-window: ^1.8.5 => 1.8.5 
    recoil: ^0.0.10 => 0.0.10 
    schema-dts: ^0.7.0 => 0.7.1 
    short-uuid: ^3.1.1 => 3.1.1 
    source-map-explorer: ^2.4.2 => 2.5.0 
    tailwindcss: ^1.7.3 => 1.7.6 
    typescript: ^4.0.2 => 4.0.2 
  npmGlobalPackages:
    @angular/cli: 1.3.0
    eslint: 5.9.0
    gatsby-cli: 2.10.0
    ios-deploy: 1.10.0
    netlify-cli: 1.2.2
    node-gyp: 6.1.0
    npm: 6.14.5
    react-native-cli: 2.0.1
    serverless: 1.53.0
    typescript: 3.1.3
    version: 0.1.2
    webpack-cli: 3.3.10
    yarn: 1.22.1`

[crolly]

I second this. Latest update of the @aws-amplify modules causes this error.

[ericclemmons]

@crolly @getsbydev Sorry for this. We're getting #6719 through the pipeline now. I'll validate with the (excellent!) reproduction steps above...

[ericclemmons]

Confirmed the bug:

diff --git a/package.json b/package.json
index b5cb308..f81c3cb 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@aws-amplify/api-graphql": "^1.2.0",
+    "@aws-amplify/auth": "^3.4.0",
+    "@aws-amplify/core": "^3.5.0",
+    "@aws-amplify/storage": "^3.3.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
diff --git a/src/App.js b/src/App.js
index ce9cbd2..2bbd2b1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,3 +1,4 @@
+import API from '@aws-amplify/api-graphql';
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';

❯ yarn build
yarn run v1.22.4
$ react-scripts build
Creating an optimized production build...
Failed to compile.

./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js
Cannot find module: 'isomorphic-ws'. Make sure this package is installed.

You can install this package by running: yarn add isomorphic-ws.

Quick Fix

Use aws-amplify (which brings in all sub-dependencies):

diff --git a/package.json b/package.json
index b5cb308..2fb8cfe 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "aws-amplify": "^3.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.3"
diff --git a/src/App.js b/src/App.js
index ce9cbd2..2bbd2b1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,3 +1,4 @@
+import API from '@aws-amplify/api-graphql';

❯ yarn build
yarn run v1.22.4
$ react-scripts build
Creating an optimized production build...
Compiled with warnings.

./src/App.js
  Line 1:8:  'API' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  39.38 KB  build/static/js/2.fd671573.chunk.js
  770 B     build/static/js/runtime-main.efc9bf3d.js
  644 B     build/static/js/main.5b88f605.chunk.js
  547 B     build/static/css/main.5f361e03.chunk.css

[ericclemmons]

Confirmed fixed on unstable:

diff --git a/package.json b/package.json
index b5cb308..3f9a6b9 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@aws-amplify/api-graphql": "^1.2.1-unstable.2",
+    "@aws-amplify/auth": "^3.4.1-unstable.2",
+    "@aws-amplify/core": "^3.5.1-unstable.2",
+    "@aws-amplify/storage": "^3.3.1-unstable.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
diff --git a/src/App.js b/src/App.js
index ce9cbd2..2bbd2b1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,3 +1,4 @@
+import API from '@aws-amplify/api-graphql';
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';

❯ yarn build
yarn run v1.22.4
$ react-scripts build
Creating an optimized production build...
Compiled with warnings.

./src/App.js
  Line 1:8:  'API' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  39.38 KB  build/static/js/2.fd671573.chunk.js
  770 B     build/static/js/runtime-main.efc9bf3d.js
  644 B     build/static/js/main.5b88f605.chunk.js
  547 B     build/static/css/main.5f361e03.chunk.css

We'll get this out soon!

[ericclemmons]

This is fixed!

diff --git a/package.json b/package.json
index b5cb308..d4bb804 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@aws-amplify/api-graphql": "^1.2.1",
+    "@aws-amplify/auth": "^3.4.1",
+    "@aws-amplify/core": "^3.5.1",
+    "@aws-amplify/storage": "^3.3.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
diff --git a/src/App.js b/src/App.js
index ce9cbd2..2bbd2b1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,3 +1,4 @@
+import API from '@aws-amplify/api-graphql';
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';

```
yarn run v1.22.4
$ react-scripts build
Creating an optimized production build...
Compiled with warnings.

./src/App.js
Line 1:8: 'API' is defined but never used no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

39.38 KB build/static/js/2.fd671573.chunk.js
770 B build/static/js/runtime-main.efc9bf3d.js
644 B build/static/js/main.5b88f605.chunk.js
547 B build/static/css/main.5f361e03.chunk.css

[getsbydev]

Awesome! Thank you very much!

[ericclemmons]

@getsbydev Happy to help! Thanks for the excellent description. Made it a cinch to solve 🤗