CONNECTION_STATE_CHANGE is a value but is exported as a type from amplify/api v6

[timheilman]

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

Not applicable

Amplify APIs

GraphQL API

Amplify Categories

api

Environment information

# Put output below this line

  System:
    OS: macOS 13.5.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 106.92 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
  Browsers:
    Brave Browser: 119.1.60.118
    Chrome: 120.0.6099.129
    Safari: 16.6
  npmPackages:
    @aws-amplify/ui-react: ^6.0.7 => 6.0.7
    @aws-amplify/ui-react-internal:  undefined ()
    @aws-sdk/client-cognito-identity-provider: ^3.388.0 => 3.481.0
    @aws-sdk/client-dynamodb: ^3.388.0 => 3.481.0
    @aws-sdk/client-secrets-manager: ^3.391.0 => 3.481.0
    @aws-sdk/client-sqs: ^3.388.0 => 3.481.0
    @aws-sdk/credential-providers: ^3.389.0 => 3.481.0
    @aws-sdk/util-dynamodb: ^3.388.0 => 3.481.0
    @babel/plugin-proposal-private-property-in-object: ^7.21.11 => 7.21.11
    @cypress/angular:  0.0.0-development
    @cypress/mount-utils:  0.0.0-development
    @cypress/react:  0.0.0-development
    @cypress/react18:  0.0.0-development
    @cypress/svelte:  0.0.0-development
    @cypress/vue:  0.0.0-development
    @cypress/vue2:  0.0.0-development
    @react-oauth/google: ^0.11.1 => 0.11.1
    @reduxjs/toolkit: ^1.9.5 => 1.9.7
    @reduxjs/toolkit-query:  1.0.0
    @reduxjs/toolkit-query-react:  1.0.0
    @testing-library/react: ^13.4.0 => 13.4.0
    @testing-library/user-event: ^13.5.0 => 13.5.0
    @types/chance: ^1.1.3 => 1.1.6
    @types/imap: ^0.8.37 => 0.8.40
    @types/language-name-map: ^0.3.0 => 0.3.3
    @types/node: ^20.10.5 => 20.10.5 (18.19.3)
    @types/nodemailer: ^6.4.9 => 6.4.14
    @types/ramda: ^0.29.3 => 0.29.9
    @types/react: ^18.2.15 => 18.2.45
    @types/react-dom: ^18.2.7 => 18.2.18
    @typescript-eslint/eslint-plugin: ^6.15.0 => 6.16.0
    @vitejs/plugin-react-swc: ^3.5.0 => 3.5.0
    @vitest/coverage-v8: ^1.1.0 => 1.1.0
    ag-grid-community: ^30.1.0 => 30.2.1
    ag-grid-react: ^30.1.0 => 30.2.1
    aws-amplify: ^6.0.9 => 6.0.9
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    chance: ^1.1.11 => 1.1.11
    cypress: ^13.6.1 => 13.6.2
    cypress-localstorage-commands: ^2.2.4 => 2.2.5
    dotenv: ^16.3.1 => 16.3.1
    eslint: ^8.56.0 => 8.56.0
    eslint-plugin-chai-friendly: ^0.7.2 => 0.7.2
    eslint-plugin-cypress: ^2.14.0 => 2.15.1
    eslint-plugin-react: ^7.33.2 => 7.33.2
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.0
    eslint-plugin-simple-import-sort: ^10.0.0 => 10.0.0
    feather-icons-react: ^0.6.2 => 0.6.2
    graphql: ^16.7.1 => 16.8.1 (15.8.0)
    graphql-tag: ^2.12.6 => 2.12.6
    i18next: ^23.4.2 => 23.7.11
    i18next-browser-languagedetector: ^7.1.0 => 7.2.0
    i18next-http-backend: ^2.2.1 => 2.4.2
    imap: ^0.8.19 => 0.8.19
    jsdom: ^23.0.1 => 23.0.1
    language-name-map: ^0.3.0 => 0.3.0
    mini.css: ^3.0.1 => 3.0.1
    nodemailer: ^6.9.4 => 6.9.7
    prettier: ^3.0.0 => 3.1.1
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    react-google-recaptcha: ^3.1.0 => 3.1.0
    react-i18next: ^13.0.3 => 13.5.0
    react-markdown: ^8.0.7 => 8.0.7
    react-redux: ^8.1.2 => 8.1.3
    react-router-dom: ^6.14.2 => 6.21.1
    react-select: ^5.7.4 => 5.8.0
    redux-devtools-extension: ^2.13.9 => 2.13.9
    redux-thunk: ^2.4.2 => 2.4.2
    typescript: ^4.9.5 => 4.9.5
    vite: ^5.0.10 => 5.0.10
    vite-plugin-svgr: ^4.2.0 => 4.2.0
    vite-tsconfig-paths: ^4.2.2 => 4.2.2
    vitest: ^1.1.0 => 1.1.0
    web-vitals: ^2.1.4 => 2.1.4
  npmGlobalPackages:
    @aws-amplify/cli: 12.10.0
    corepack: 0.18.0
    eas-cli: 5.9.3
    npm: 9.6.7

Describe the bug

Following the v6 documentation for AppSync GraphQL subscription connection updates I use the import as indicated:

import { CONNECTION_STATE_CHANGE, ConnectionState } from "aws-amplify/api";
...
if (payload.event === CONNECTION_STATE_CHANGE) {
...

This results, in my IDE where CONNECTION_STATE_CHANGE is referenced, in this error:

TS1362:  CONNECTION_STATE_CHANGE  cannot be used as a value because it was exported using  export type 
index.d.ts(4, 49):  CONNECTION_STATE_CHANGE  was exported here.

And results in the error in the launched app:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/aws-amplify_api.js?v=c267a91d' does not provide an export named 'CONNECTION_STATE_CHANGE' (at subscriptions.ts:2:10)

Expected behavior

That the import statement will not throw a syntax error, per the documentation referenced in the bug description, and instead provide the const exported not-as-a-type elsewhere in the amplify codebase.

Reproduction steps

Follow the v6 documentation for AppSync GraphQL subscription connection updates.

Code Snippet

// Put your code below this line.
import { CONNECTION_STATE_CHANGE, ConnectionState } from "aws-amplify/api";

// ...

Hub.listen("api", (data: any) => {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
      const { payload } = data;
      if (payload.event === CONNECTION_STATE_CHANGE) {
// ...

Log output

// Put your logs below this line

aws-exports.js

not applicable

Manual configuration

  {
    API: {
      GraphQL: {
        endpoint: requiredViteEnvVar("API_URL"),
        region: requiredViteEnvVar("AWS_REGION"),
        defaultAuthMode: "userPool",
      },
    },
    Auth: {
      Cognito: {
        userPoolClientId: requiredViteEnvVar("COGNITO_USER_POOL_CLIENT_ID_WEB"),
        userPoolId: requiredViteEnvVar("COGNITO_USER_POOL_ID"),
      },
    },
  },
  {
    API: {
      GraphQL: {
        headers: async () => {
          try {
            const session = await fetchAuthSession();
            return {
              Authorization: session?.tokens?.idToken?.toString(),
            };
          } catch (e) {
            return {};
          }
        },
      },
    },
  },

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

I have a PR that exports the constant as a constant rather than as a type, with a new unit test, ready to submit.

[cwomack]

@timheilman, thank you for opening this issue and submitting a PR already for it. I'll review both of these with the team and report back soon. Appreciate you taking the time to call this out and help!

[david-mcafee]

@cwomack - The PR to fix this issue has been merged, so we can close this ticket after the next release. Thanks @timheilman for the fix!

[cwomack]

@timheilman, the fix for this was released on 01/04/24 with v6.0.10. Please upgrade to the latest version and let us know if you experience any further issues! Thanks.