Amplify-js: implicitly has an 'any' type (zen-observable, graphql/language/ast)

[yooouuri]

Describe the bug
I am using AWS amplify in a Vue.js with Typescript.

While running yarn serve aswel yarn build it fails because of some missing modules.

 error  in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/api/lib-esm/API.d.ts
ERROR in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/api/lib-esm/API.d.ts
1:29 Could not find a declaration file for module 'zen-observable'. '/opt/atlassian/pipelines/agent/build/node_modules/zen-observable/index.js' implicitly has an 'any' type.
  Try `npm install @types/zen-observable` if it exists or add a new declaration (.d.ts) file containing `declare module 'zen-observable';`
  > 1 | import * as Observable from 'zen-observable';
      |                             ^
    2 | import { GraphQLOptions, GraphQLResult } from './types';
    3 | export declare const graphqlOperation: (query: any, variables?: {}) => {
    4 |     query: any;
 error  in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/api/lib-esm/types/index.d.ts
ERROR in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/api/lib-esm/types/index.d.ts
1:30 Could not find a declaration file for module 'graphql/language/ast'. '/opt/atlassian/pipelines/agent/build/node_modules/graphql/language/ast.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql/language/ast';`
  > 1 | import { DocumentNode } from 'graphql/language/ast';
      |                              ^
    2 | /**
    3 |  * RestClient instance options
    4 |  */
 error  in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/core/lib-esm/Util/Reachability.d.ts
ERROR in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/core/lib-esm/Util/Reachability.d.ts
1:29 Could not find a declaration file for module 'zen-observable'. '/opt/atlassian/pipelines/agent/build/node_modules/zen-observable/index.js' implicitly has an 'any' type.
  Try `npm install @types/zen-observable` if it exists or add a new declaration (.d.ts) file containing `declare module 'zen-observable';`
  > 1 | import * as Observable from 'zen-observable';
      |                             ^
    2 | declare type NetworkStatus = {
    3 |     online: boolean;
    4 | };
 error  in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/pubsub/lib-esm/Providers/MqttOverWSProvider.d.ts
ERROR in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/pubsub/lib-esm/Providers/MqttOverWSProvider.d.ts
1:29 Could not find a declaration file for module 'zen-observable'. '/opt/atlassian/pipelines/agent/build/node_modules/zen-observable/index.js' implicitly has an 'any' type.
  Try `npm install @types/zen-observable` if it exists or add a new declaration (.d.ts) file containing `declare module 'zen-observable';`
  > 1 | import * as Observable from 'zen-observable';
      |                             ^
    2 | import { AbstractPubSubProvider } from './PubSubProvider';
    3 | import { ProvidertOptions, SubscriptionObserver } from '../types';
    4 | export declare function mqttTopicMatch(filter: string, topic: string): boolean;
 error  in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/pubsub/lib-esm/Providers/PubSubProvider.d.ts
ERROR in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/pubsub/lib-esm/Providers/PubSubProvider.d.ts
1:29 Could not find a declaration file for module 'zen-observable'. '/opt/atlassian/pipelines/agent/build/node_modules/zen-observable/index.js' implicitly has an 'any' type.
  Try `npm install @types/zen-observable` if it exists or add a new declaration (.d.ts) file containing `declare module 'zen-observable';`
  > 1 | import * as Observable from 'zen-observable';
      |                             ^
    2 | import { PubSubProvider, ProvidertOptions } from '../types';
    3 | export declare abstract class AbstractPubSubProvider implements PubSubProvider {
    4 |     private _config;
 error  in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/pubsub/lib-esm/PubSub.d.ts
ERROR in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/pubsub/lib-esm/PubSub.d.ts
1:29 Could not find a declaration file for module 'zen-observable'. '/opt/atlassian/pipelines/agent/build/node_modules/zen-observable/index.js' implicitly has an 'any' type.
  Try `npm install @types/zen-observable` if it exists or add a new declaration (.d.ts) file containing `declare module 'zen-observable';`
  > 1 | import * as Observable from 'zen-observable';
      |                             ^
    2 | import { PubSubProvider, PubSubOptions, ProvidertOptions } from './types';
    3 | export default class PubSub {
    4 |     private _options;
 error  in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/pubsub/lib-esm/types/Provider.d.ts
ERROR in /opt/atlassian/pipelines/agent/build/node_modules/@aws-amplify/pubsub/lib-esm/types/Provider.d.ts
1:29 Could not find a declaration file for module 'zen-observable'. '/opt/atlassian/pipelines/agent/build/node_modules/zen-observable/index.js' implicitly has an 'any' type.
  Try `npm install @types/zen-observable` if it exists or add a new declaration (.d.ts) file containing `declare module 'zen-observable';`
  > 1 | import * as Observable from 'zen-observable';
      |                             ^
    2 | import { ProvidertOptions } from './PubSub';
    3 | export interface PubSubProvider {
    4 |     configure(config: object): object;

To Reproduce
Steps to reproduce the behavior:

1. Create empty Vue project with vue create ...
2. Add AWS amplify (yarn add aws-amplify)
3. Add the configuration to main.ts (Amplify.configure)
4. Perform some login action (await Auth.signIn(credentials.email, credentials.password);)
5. See the above error...

Expected behavior
It should run yarn serve or yarn build without errors.

Sample code

// main.ts (config)
Amplify.configure({
  Auth: {
    region: process.env.VUE_APP_COGNITO_REGION,
    userPoolId: process.env.VUE_APP_COGNITO_USER_POOL_ID,
    userPoolWebClientId: process.env.VUE_APP_COGNITO_USER_POOL_WEB_CLIENT_ID,
    authenticationFlowType: process.env.VUE_APP_COGNITO_AUTHENTICATION_FLOW_TYPE,
  },
});

// login
await Auth.signIn(credentials.email, credentials.password);

[luisgregson]

Could not find a declaration file for module 'zen-observable'

aws-amplify has a dependency of @amplify/api which has a dependency on zen-observable, however the types (@types/zen-observable) are only listed as a dev dependency, when they should be a full dependency.

The workaround is to install @types/zen-observable ^0.8.6 locally.

Could not find a declaration file for module 'graphql/language/ast'

The issue with graphql is that aws-amplify has a dependency of @amplify/api which has a dependency on [email protected].

[email protected] doesn't bundle type definitions, so the @amplify/api package should have a dependency on @types/[email protected], but this is missing.

A workaround is adding @types/[email protected] in your local project.

The actual solution is for the AWS team to either add the @types/[email protected] dependency to @amplify/api, or upgrade the graphql package in @amplify/api to a version which has bundled type definitions.

Incidentally, there is also a security issue - the package.json in @amplify/api fixes the graphql version to 14.0.0 which means any patch-updates (eg security patches) would not be picked up 😬

[toddb]

An even poorer (but immediate workaround) is to skip checks in tsconfig.json. Sorry reference lost.

```tsconfig.json

"compilerOptions": {
"skipLibCheck": true,
...
}
```

[alastair-todd]

Just to add - having bumped amplify-js packages to the latest in our angular app, getting this compile error too.

    "@aws-amplify/auth": "^2.1.7",
    "@aws-amplify/core": "^2.2.6",
    "amazon-cognito-identity-js": "^3.2.6",

ERROR: node_modules/@aws-amplify/auth/node_modules/@aws-amplify/core/lib-esm/Util/Reachability.d.ts:1:29 - error TS7016: Could not find a declaration file for module 'zen-observable'. 'C:/_dev/workspace/node_modules/zen-observable/index.js' implicitly has an 'any' type.
Try npm install @types/zen-observable if it exists or add a new declaration (.d.ts) file containing declare module 'zen-observable';

[sammartinez]

@yooouuri, there has been improvements to our repository for TypeScript support. Can you let us know if you are still experiencing this issue on the latest version of aws-amplify? If so, can you provide your package.json along with your environment settings?

Please use the follow command:

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

Thanks ahead of time!

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.