search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.43k stars 2.13k forks source link

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

Closed timheilman closed 10 months ago

timheilman commented 10 months ago

Before opening, please confirm:

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 commented 10 months ago

@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 commented 10 months ago

@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 commented 10 months ago

@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.