Cannot use namespace 'Observable' as a type

[revmischa]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` # Put output below this line System: OS: macOS 12.0.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 293.46 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.17.5 - /usr/local/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.1.3 - /usr/local/bin/npm Browsers: Brave Browser: 95.1.31.88 Safari: 15.1 npmPackages: @apollo/client: ^3.4.16 => 3.4.16 @apollo/client/cache: undefined () @apollo/client/core: undefined () @apollo/client/errors: undefined () @apollo/client/link/batch: undefined () @apollo/client/link/batch-http: undefined () @apollo/client/link/context: undefined () @apollo/client/link/core: undefined () @apollo/client/link/error: undefined () @apollo/client/link/http: undefined () @apollo/client/link/persisted-queries: undefined () @apollo/client/link/retry: undefined () @apollo/client/link/schema: undefined () @apollo/client/link/utils: undefined () @apollo/client/link/ws: undefined () @apollo/client/react: undefined () @apollo/client/react/components: undefined () @apollo/client/react/context: undefined () @apollo/client/react/data: undefined () @apollo/client/react/hoc: undefined () @apollo/client/react/hooks: undefined () @apollo/client/react/parser: undefined () @apollo/client/react/ssr: undefined () @apollo/client/testing: undefined () @apollo/client/utilities: undefined () @apollo/client/utilities/globals: undefined () @aws-amplify/ui-react: ^1.2.24 => 1.2.24 @babel/core: ^7.15.8 => 7.15.8 (7.12.9) @emotion/react: ^11.5.0 => 11.5.0 @emotion/styled: ^11.3.0 => 11.3.0 (10.0.27) @mui/icons-material: ^5.0.5 => 5.0.5 @mui/lab: ^5.0.0-alpha.53 => 5.0.0-alpha.53 @mui/material: ^5.0.6 => 5.0.6 @sentry/browser: ^6.14.1 => 6.14.1 @sentry/react: ^6.14.1 => 6.14.1 @sentry/tracing: ^6.14.1 => 6.14.1 @storybook/addon-actions: ^6.3.12 => 6.3.12 @storybook/addon-essentials: ^6.3.12 => 6.3.12 @storybook/addon-links: ^6.3.12 => 6.3.12 @storybook/react: ^6.3.12 => 6.3.12 @types/chrome: ^0.0.100 => 0.0.100 @types/emoji-strip: ^1.0.0 => 1.0.0 @types/faker: ^5.5.9 => 5.5.9 @types/jest: * => 27.0.2 @types/jquery: ^3.3.33 => 3.5.8 @types/lodash.debounce: ^4.0.6 => 4.0.6 @types/react: ^17.0.0 => 17.0.33 @types/react-dom: ^17.0.0 => 17.0.10 @types/valid-url: ^1.0.3 => 1.0.3 axios: ^0.21.1 => 0.21.4 babel-loader: ^8.2.2 => 8.2.3 camelcase-keys: ^6.2.2 => 6.2.2 classnames: ^2.3.1 => 2.3.1 copy-webpack-plugin: ^6.1.0 => 6.4.1 css-loader: ^5.2.5 => 5.2.7 (3.6.0) date-fns: ^2.25.0 => 2.25.0 dotenv-webpack: ^1.8.0 => 1.8.0 email-validator: ^2.0.4 => 2.0.4 emoji-strip: ^1.0.1 => 1.0.1 faker: ^5.5.3 => 5.5.3 formik: ^2.2.6 => 2.2.9 glob: ^7.1.6 => 7.2.0 graphql: ^15.6.1 => 15.7.2 (14.5.0, 14.0.0) graphql-request: ^3.5.0 => 3.6.1 jest: ^27.0.0 => 27.3.1 jest-css-modules-transform: ^4.2.1 => 4.3.0 jest-standard-reporter: ^2.0.0 => 2.0.0 lodash.debounce: ^4.0.8 => 4.0.8 mini-css-extract-plugin: ^1.6.0 => 1.6.2 parse-url: ^5.0.7 => 5.0.7 postcss-loader: ^4.2.0 => 4.3.0 prettier: ^2.2.1 => 2.4.1 (2.2.1) react: ^17.0.1 => 17.0.2 react-circular-progressbar: ^2.0.4 => 2.0.4 react-dom: ^17.0.1 => 17.0.2 react-gradient-progress: ^1.0.3 => 1.0.3 react-hook-form: ^7.17.1 => 7.18.0 react-lottie-player: ^1.4.0 => 1.4.1 react-singleton-hook: ^3.2.1 => 3.2.1 rimraf: ^3.0.2 => 3.0.2 (2.7.1, 2.2.8) sass-loader: 10.1.1 => 10.1.1 ts-jest: ^27.0.0 => 27.0.7 ts-loader: ^6.2.1 => 6.2.2 typescript: ^4.4.4 => 4.4.4 typescript-plugin-css-modules: ^3.2.0 => 3.4.0 valid-url: ^1.0.9 => 1.0.9 version-bump-prompt: ^6.1.0 => 6.1.0 wallaby-webpack: ^3.9.16 => 3.9.16 webpack: ^4.44.1 => 4.46.0 webpack-cli: ~3.3.11 => 3.3.12 webpack-merge: ~4.2.2 => 4.2.2 yup: ^0.32.9 => 0.32.11 npmGlobalPackages: @creditkarma/graphql-validator: 0.5.0 @jetkit/cdk-runtime: 2.0.17 @jetkit/cdk: 2.0.17 aws-cdk: 1.127.0 esbuild-node-loader: 0.4.2 esbuild: 0.12.25 eslint: 7.32.0 esm: 3.2.25 esmo: 0.10.1 graphql: 15.5.3 husky: 7.0.2 import-js: 4.0.2 node-notifier: 10.0.0 npm: 8.1.3 prettier: 2.4.1 prisma-appsync: 1.0.0-beta.58.2 prisma: 2.30.3 ts-node-dev: 1.1.8 ts-node: 10.2.1 typescript-language-server: 0.6.1 typescript: 4.3.5 yarn: 1.22.17 ```

Describe the bug

Installed amplify/auth and it won't compile:

➜  tsc
node_modules/@aws-amplify/api/lib-esm/API.d.ts:111:34 - error TS2709: Cannot use namespace 'Observable' as a type.

111     }): Promise<GraphQLResult> | Observable<object>;
                                     ~~~~~~~~~~

Found 1 error.

I suspect the problem is conflicting versions of zen-observable-ts

myapp@0.0.35 /Users/cyber/dev/freezy
├─┬ @apollo/client@3.4.16
│ └── zen-observable-ts@1.1.0
└─┬ @aws-amplify/ui-react@1.2.24
  └─┬ @aws-amplify/ui-components@1.9.4
    └─┬ aws-amplify@4.3.6
      ├─┬ @aws-amplify/api@4.0.24
      │ └─┬ @aws-amplify/api-graphql@2.2.13
      │   └── zen-observable-ts@0.8.19
      ├─┬ @aws-amplify/core@4.3.6
      │ └── zen-observable-ts@0.8.19
      ├─┬ @aws-amplify/datastore@3.6.0
      │ └── zen-observable-ts@0.8.19
      └─┬ @aws-amplify/pubsub@4.2.0
        └── zen-observable-ts@0.8.19

Expected behavior

Can compile

Reproduction steps

npm i @aws-amplify/ui-react tsc

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

[revmischa]

Also getting this error from subscription-handshake-link.d.ts

node_modules/aws-appsync-subscription-link/lib/subscription-handshake-link.d.ts:17:5 - error TS2416: Property 'request' in type 'SubscriptionHandshakeLink' is not assignable to the same property in base type 'ApolloLink'.
  Type '(operation: Operation) => Observable<unknown>' is not assignable to type '(operation: Operation, forward?: NextLink | undefined) => Observable<FetchResult<{ [key: string]: any; }, Record<string, any>, Record<string, any>>> | null'.
    Type 'Observable<unknown>' is not assignable to type 'Observable<FetchResult<{ [key: string]: any; }, Record<string, any>, Record<string, any>>>'.
      Type 'unknown' is not assignable to type 'FetchResult<{ [key: string]: any; }, Record<string, any>, Record<string, any>>'.

17     request(operation: Operation): Observable<unknown>;
       ~~~~~~~

[3:04:24 PM] Found 1 error. Watching for file changes.

Setting zen-observable-ts@0.8.19 at the top level package.json didn't seem to help much

$ npm ls zen-observable-ts
freezy@0.0.35 /Users/cyber/dev/freezy
├─┬ @apollo/client@3.4.16
│ └── zen-observable-ts@1.1.0
├─┬ @aws-amplify/ui-react@1.2.24
│ └─┬ @aws-amplify/ui-components@1.9.4
│   └─┬ aws-amplify@4.3.6
│     ├─┬ @aws-amplify/api@4.0.24
│     │ └─┬ @aws-amplify/api-graphql@2.2.13
│     │   └── zen-observable-ts@0.8.19 deduped
│     ├─┬ @aws-amplify/core@4.3.6
│     │ └── zen-observable-ts@0.8.19 deduped
│     ├─┬ @aws-amplify/datastore@3.6.0
│     │ └── zen-observable-ts@0.8.19 deduped
│     └─┬ @aws-amplify/pubsub@4.2.0
│       └── zen-observable-ts@0.8.19 deduped
└── zen-observable-ts@0.8.19

[Phoenixmatrix]

Hitting this issue myself. A pain since I'm not sure how to fix it without breaking something else...

[pbelza]

Happened to me also. (using Angular 12+)

[aws-eddy]

Can we please see how you are bringing in your Observable dependency from zen-observable-ts in the source code where the error is happening?

[mwawrusch]

So I ran into this too...

[mwawrusch]

To add to that, I believe it has to do with using typescript above version 4.4.4

[wstam88]

I added type Observable<T> = unknown to my types/index.d.ts and it solves the issue for now. Just define it somewhere and you should be good.

[jlecren]

I added the following import in my code (@types/index.d.ts) in order to declare the namespace "ZenObservable":

import "zen-observable";

Also as a quick fix, I used "patch-package" to patch the module "aws-appsync-subscription-link" with the following line (l. 17):

aws-appsync-subscription-link/lib/subscription-handshake-link.d.ts

  ## Replace "unknown" by "FetchResult"
  request(operation: Operation): Observable<FetchResult>;

package.json

"dependencies": {
    "@apollo/client": "3.5.8",
    "aws-appsync-auth-link": "3.0.7",
    "aws-appsync-subscription-link": "3.0.9"
},
"devDependencies": {
    "patch-package": "^6.4.7"
}

[glitchgirl]

I'm also running into this issue with react 17.0.2, and typescript 3.9.10, so I don't think it's just typescript 4 and above.

[mortezakarimi]

I have same problem in Angular 13

[andrew-g-mcdonald]

I have same problem in Angular 13

Yep, still on-going issue.

[cptflammin]

Same problem here, only way to get rid of this is currently

"skipLibCheck": true

in compilerOptions of tsconfig.json

[jimblanc]

We have published an RFC on our plan for improving TypeScript support in Amplify JS & would love to get your feedback & suggestions!

RFC: Amplify JS TypeScript Improvements

[cwomack]

With the release of the latest major version of Amplify (aws-amplify@>6), this issue should now be resolved! Please refer to our release announcement, migration guide, and documentation for more information.