Establishing AppSync WebSocket connection fails after upgrading to v4.3.30

[Jordan-Eckowitz]

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

GraphQL API

Amplify Categories

api

Environment information

# Put output below this line
  System:
    OS: macOS 12.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 135.84 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.2/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 103.0.2
    Safari: 15.6
  npmPackages:
    @aws-amplify/api-graphql: ^2.3.10 => 2.3.10 (2.2.18)
    @aws-amplify/pubsub: ^4.4.9 => 4.4.9 (4.4.7, 4.2.5)
    @aws/dynamodb-batch-iterator: ^0.7.1 => 0.7.1 
    @babel/core: ^7.9.6 => 7.14.6 (7.12.9, 7.9.0)
    @babel/polyfill: ^7.8.7 => 7.12.1 
    @dnd-kit/core: ^5.0.1 => 5.0.1 
    @dnd-kit/sortable: ^6.0.0 => 6.0.0 
    @dnd-kit/utilities: ^3.1.0 => 3.1.0 
    @reach/router: ^1.3.3 => 1.3.4 
    @sentry/browser: ^5.15.4 => 5.30.0 
    @smartrent/use-persisted-state: ^0.3.1 => 0.3.1 
    @storybook/addon-actions: ^6.1.20 => 6.3.1 
    @storybook/addon-essentials: ^6.1.20 => 6.3.1 
    @storybook/addon-knobs: ^6.1.20 => 6.3.0 
    @storybook/addon-links: ^6.1.20 => 6.3.1 
    @storybook/client-api: ^6.3.12 => 6.3.12 (6.3.1)
    @storybook/node-logger: ^6.1.20 => 6.3.1 
    @storybook/preset-create-react-app: ^3.1.6 => 3.1.7 
    @storybook/react: ^6.2.9 => 6.3.1 
    @svgr/cli: ^5.4.0 => 5.5.0 
    @svgr/webpack: ^5.5.0 => 5.5.0 (4.3.3)
    @testing-library/jest-dom: ^5.11.0 => 5.14.1 
    @testing-library/react: ^10.4.4 => 10.4.9 
    @testing-library/user-event: ^12.8.3 => 12.8.3 
    @types/aos: ^3.0.3 => 3.0.3 
    @types/d3: ^6.3.0 => 6.7.5 
    @types/faker: ^5.5.8 => 5.5.8 
    @types/jest: ^26.0.14 => 26.0.23 
    @types/lodash: ^4.14.168 => 4.14.170 
    @types/node: ^14.11.5 => 14.17.4 (15.12.5, 13.13.52)
    @types/reach__router: ^1.3.9 => 1.3.9 
    @types/react: ^16.9.51 => 16.14.8 (17.0.11)
    @types/react-beautiful-dnd: ^13.0.0 => 13.0.0 
    @types/react-collapse: ^5.0.1 => 5.0.1 
    @types/react-dom: ^16.9.8 => 16.9.13 
    @types/react-helmet: ^6.1.0 => 6.1.1 
    @types/react-lottie: ^1.2.5 => 1.2.5 
    @types/react-redux: ^7.1.15 => 7.1.16 
    @types/react-scroll: ^1.8.3 => 1.8.3 
    @types/react-slider: ^1.0.0 => 1.3.0 
    @types/styled-components: ^5.1.4 => 5.1.10 
    @types/uuid: ^8.3.0 => 8.3.0 
    @typescript-eslint/eslint-plugin: ^4.14.1 => 4.28.1 (2.34.0)
    @typescript-eslint/parser: ^4.14.1 => 4.28.1 (2.34.0)
    ag-grid-base-icons:  1.0.0 
    ag-grid-community: ^23.2.1 => 23.2.1 
    ag-grid-react: ^23.2.1 => 23.2.1 
    aos: ^2.3.4 => 2.3.4 
    aws-amplify: ^4.3.11 => 4.3.30 
    aws-amplify-react: ^5.1.9 => 5.1.9 
    aws-sdk: ^2.656.0 => 2.935.0 
    axios: ^0.21.1 => 0.21.1 (0.26.0, 0.21.4)
    babel-loader: ^8.1.0 => 8.1.0 (8.2.2)
    browser-image-compression: ^1.0.9 => 1.0.14 
    copy-text-to-clipboard: ^3.0.1 => 3.0.1 
    core-js: ^3.6.5 => 3.15.1 (2.6.12)
    csv-parse: ^4.14.2 => 4.16.0 
    current-device: 0.10.2 => 0.10.2 
    customize-cra: ^1.0.0 => 1.0.0 
    customize-cra-react-refresh: ^1.1.0 => 1.1.0 
    d3: ^6.1.1 => 6.7.0 (3.5.17)
    date-fns: ^2.11.1 => 2.22.1 
    detect-browser: ^5.1.0 => 5.2.0 
    dotenv: ^8.2.0 => 8.6.0 (6.2.0, 8.2.0)
    eslint-config-airbnb: ^18.1.0 => 18.2.1 
    eslint-config-prettier: ^6.11.0 => 6.15.0 
    eslint-plugin-import: ^2.20.2 => 2.23.4 (2.20.1)
    eslint-plugin-jsx-a11y: ^6.2.3 => 6.2.3 
    eslint-plugin-prettier: ^3.1.3 => 3.4.0 
    eslint-plugin-react: ^7.19.0 => 7.19.0 
    example:  0.1.0 
    faker: ^5.5.3 => 5.5.3 
    fast-json-patch: ^3.0.0-1 => 3.0.0-1 
    framer-motion: ^3.1.1 => 3.10.6 
    handlebars: ^4.7.7 => 4.7.7 
    husky: ^4.3.8 => 4.3.8 
    immer: ^8.0.1 => 8.0.4 (9.0.6, 8.0.1, 1.10.0)
    is_js: ^0.9.0 => 0.9.0 
    jest-environment-jsdom-sixteen: ^1.0.3 => 1.0.3 
    jest-extended: ^0.11.5 => 0.11.5 
    lint-staged: ^10.5.3 => 10.5.4 
    lodash: ^4.17.21 => 4.17.21 
    lodash.debounce: ^4.0.8 => 4.0.8 
    memo-parser:  undefined (0.2.1)
    minimist: ^1.2.5 => 1.2.5 
    mobx: ^5.15.4 => 5.15.7 
    node-sass: ^4.14.1 => 4.14.1 
    plotly.js: ^1.52.3 => 1.58.4 
    polished: ^4.1.3 => 4.1.3 (3.7.2)
    prettier: ^2.1.2 => 2.3.2 (2.2.1)
    pretty-checkbox: ^3.0.3 => 3.0.3 
    prop-types: ^15.7.2 => 15.7.2 
    query-string: ^6.12.1 => 6.14.1 (4.3.4)
    react: ^16.13.1 => 16.14.0 
    react-app-polyfill: ^1.0.6 => 1.0.6 
    react-app-rewired: ^2.1.6 => 2.1.8 
    react-autocomplete-hint: ^1.3.0 => 1.3.0 
    react-beautiful-dnd: ^13.0.0 => 13.1.0 
    react-collapse: ^5.1.0 => 5.1.0 
    react-csv: ^2.0.3 => 2.0.3 
    react-dom: ^16.13.1 => 16.14.0 
    react-draggable: 4.2.0 => 4.2.0 (4.4.3)
    react-dropzone: ^10.2.2 => 10.2.2 
    react-elastic-carousel: ^0.11.5 => 0.11.5 
    react-emoji-render: ^1.2.4 => 1.2.4 
    react-error-boundary: ^3.1.1 => 3.1.3 
    react-grid-layout: ^0.18.3 => 0.18.3 
    react-gtm-module: ^2.0.4 => 2.0.11 
    react-helmet: ^5.2.1 => 5.2.1 
    react-highlight-words: ^0.16.0 => 0.16.0 
    react-icons: ^4.2.0 => 4.2.0 
    react-idle-timer: ^5.0.0-rc.24 => 5.0.0-rc.24 
    react-is: ^16.13.1 => 16.13.1 (17.0.2)
    react-lottie: ^1.2.3 => 1.2.3 
    react-multiselect-checkboxes: ^0.1.1 => 0.1.1 
    react-redux: ^7.2.0 => 7.2.4 
    react-scripts: ^3.4.3 => 3.4.4 
    react-scroll: ^1.7.16 => 1.8.2 
    react-scroll-sync: ^0.8.0 => 0.8.0 
    react-slider: ^1.1.2 => 1.3.1 
    react-spinners: ^0.8.1 => 0.8.3 
    react-spring: ^8.0.27 => 8.0.27 
    react-swipeable: ^5.5.1 => 5.5.1 
    react-toastify: ^5.5.0 => 5.5.0 
    react-tooltip-lite: ^1.11.2 => 1.12.0 
    react-transition-group: ^4.3.0 => 4.4.2 (2.9.0)
    react-transition-group/CSSTransition:  undefined ()
    react-transition-group/ReplaceTransition:  undefined ()
    react-transition-group/SwitchTransition:  undefined ()
    react-transition-group/Transition:  undefined ()
    react-transition-group/TransitionGroup:  undefined ()
    react-transition-group/TransitionGroupContext:  undefined ()
    react-transition-group/config:  undefined ()
    react-use: ^14.1.0 => 14.3.0 
    react-visibility-sensor: ^5.1.1 => 5.1.1 
    redoc: 2.0.0-rc.41 => 2.0.0-rc.41 
    redux: ^4.0.5 => 4.1.0 
    redux-devtools: ^3.5.0 => 3.7.0 
    redux-devtools-extension: ^2.13.8 => 2.13.9 
    redux-mock-store: ^1.5.4 => 1.5.4 
    redux-state-sync: ^3.1.2 => 3.1.2 
    redux-thunk: ^2.3.0 => 2.3.0 
    reselect: ^4.0.0 => 4.0.0 
    simplur: ^3.0.1 => 3.0.1 
    smart-timeout: ^2.2.0 => 2.6.1 
    source-map-explorer: ^2.4.2 => 2.5.2 
    styled-components: ^5.1.0 => 5.3.0 
    styled-components/macro:  undefined ()
    styled-components/native:  undefined ()
    styled-components/primitives:  undefined ()
    stylelint: ^13.3.3 => 13.13.1 
    stylelint-config-recommended: ^3.0.0 => 3.0.0 
    typescript: ^4.0.3 => 4.3.4 
    use-deep-compare-effect: ^1.6.1 => 1.6.1 
    uuid: ^8.3.0 => 8.3.2 (3.4.0, 3.3.2)
  npmGlobalPackages:
    @aws-amplify/cli: 7.6.3
    npm: 6.14.15
    serverless: 2.40.0

Describe the bug

I want to upgrade to v4.3.30 to get access to the new connection state feature: #10063

After upgrading I am not able to establish a WebSocket connection for the API. It fails and I get the following warning message:

"AppSync Realtime subscription init error: Error: No User Pool in the configuration."

{
    "provider": {
        "_config": {},
        "socketStatus": 0,
        "keepAliveTimeout": 300000,
        "subscriptionObserverMap": {},
        "promiseArray": [],
        "connectionStateMonitor": {
            "_linkedConnectionState": {
                "networkState": "connected",
                "connectionState": "disconnected",
                "intendedConnectionState": "disconnected",
                "keepAliveState": "healthy"
            },
            "_linkedConnectionStateObservable": {},
            "_linkedConnectionStateObserver": {
                "_subscription": {
                    "_observer": {},
                    "_state": "ready"
                }
            }
        }
    },
    "error": {
        "errors": [
            {
                "message": "AppSync Realtime subscription init error: Error: No User Pool in the configuration."
            }
        ]
    }
}

Expected behavior

WebSocket connection works as usual

Reproduction steps

1. Upgrade to v4.3.30

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

[elorzafe]

@Jordan-Eckowitz have you clear your node_modules and reinstall again?

[Jordan-Eckowitz]

@elorzafe that did the trick, thanks!