amplify-js Cannot use namespace 'Observable' as a type

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

[email protected] /Users/cyber/dev/freezy
├─┬ @apollo/[email protected]
│ └── [email protected]
└─┬ @aws-amplify/[email protected]
  └─┬ @aws-amplify/[email protected]
    └─┬ [email protected]
      ├─┬ @aws-amplify/[email protected]
      │ └─┬ @aws-amplify/[email protected]
      │   └── [email protected]
      ├─┬ @aws-amplify/[email protected]
      │ └── [email protected]
      ├─┬ @aws-amplify/[email protected]
      │ └── [email protected]
      └─┬ @aws-amplify/[email protected]
        └── [email protected]

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

Nov 12 '21 17:11 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 [email protected] at the top level package.json didn't seem to help much

$ npm ls zen-observable-ts
[email protected] /Users/cyber/dev/freezy
├─┬ @apollo/[email protected]
│ └── [email protected]
├─┬ @aws-amplify/[email protected]
│ └─┬ @aws-amplify/[email protected]
│   └─┬ [email protected]
│     ├─┬ @aws-amplify/[email protected]
│     │ └─┬ @aws-amplify/[email protected]
│     │   └── [email protected] deduped
│     ├─┬ @aws-amplify/[email protected]
│     │ └── [email protected] deduped
│     ├─┬ @aws-amplify/[email protected]
│     │ └── [email protected] deduped
│     └─┬ @aws-amplify/[email protected]
│       └── [email protected] deduped
└── [email protected]

Nov 16 '21 13:11 revmischa

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

Nov 17 '21 22:11 Phoenixmatrix

Happened to me also. (using Angular 12+)

Nov 30 '21 13:11 pbelza

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?

Dec 03 '21 21:12 aws-eddy

So I ran into this too...

Jan 07 '22 04:01 mwawrusch

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

Jan 10 '22 23:01 mwawrusch

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.

Jan 20 '22 06:01 wstam88

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"
}

Feb 09 '22 13:02 jlecren

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.

Feb 22 '22 16:02 glitchgirl

I have same problem in Angular 13

May 10 '22 17:05 mortezakarimi

I have same problem in Angular 13

Yep, still on-going issue.

Aug 23 '22 06:08 andrew-g-mcdonald

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

"skipLibCheck": true

in compilerOptions of tsconfig.json

Sep 12 '22 09:09 cptflammin

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

Mar 23 '23 15:03 jimblanc

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.

Nov 16 '23 22:11 cwomack

amplify-js amplify-js copied to clipboard

Cannot use namespace 'Observable' as a type

Before opening, please confirm:

JavaScript Framework

Amplify APIs

Amplify Categories

Environment information

Describe the bug

Expected behavior

Reproduction steps

Code Snippet

Log output

aws-exports.js

Manual configuration

Additional configuration

Mobile Device

Mobile Operating System

Mobile Browser

Mobile Browser Version

Additional information and screenshots

amplify-js
amplify-js copied to clipboard