Amplify-js: Failing builds in Typescript project using aws-amplify/api since this line was added

[nihakue]

Describe the bug
Since the addition of the linked line, our builds have been failing with:

<truncated>/@aws-amplify/api/lib/types/index.d.ts
ERROR in <truncated>/node_modules/@aws-amplify/api/lib/types/index.d.ts(1,30):
TS7016: Could not find a declaration file for module 'graphql/language/ast'. '<truncated>/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';`

We are using [email protected] and @aws-amplify/[email protected]. Our tsconfig.json is:

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": false,
    "typeRoots": [
      "./typings/", "./node_modules/@types/"
    ]
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

I can work-around the issue with the following steps

1. Add @types/graphql as a dev dependency
2. Change typsecript lib ( tsconfig.json: compilerOptions.lib: ["esnext", "dom"])

At the moment, we aren't using graphql, so the graphql dependency is a little unfortunate.

To Reproduce
Steps to reproduce the behavior:

1. Create a new typescript app (we use create-react-app-ts)
2. Add a dependency on @aws-amplify/api
3. Try to build
4. See error

Expected behavior
When not using graphql, I shouldn't have to use graphql types.

Screenshots
N/A

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Any
• Version Any

[hoang-innomizetech]

I got another error related to AmplifyUI after adding graphql types.

[samuelcastro]

I'm facing the same problem. Is there a fixing coming @manueliglesias ?

Including @types/graphql is introducing more issues, and in fact, it's not a solution since I'm using graphql at this point.

node_modules/@types/graphql/subscription/subscribe.d.ts:36:13 - error TS2583: Cannot find name 'AsyncIterator'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.

36 }): Promise<AsyncIterator<ExecutionResult<TData>> | ExecutionResult<TData>>;
               ~~~~~~~~~~~~~

node_modules/@types/graphql/subscription/subscribe.d.ts:47:12 - error TS2583: Cannot find name 'AsyncIterator'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.

47 ): Promise<AsyncIterator<ExecutionResult<TData>> | ExecutionResult<TData>>;
              ~~~~~~~~~~~~~

node_modules/@types/graphql/subscription/subscribe.d.ts:75:12 - error TS2304: Cannot find name 'AsyncIterable'.

75 ): Promise<AsyncIterable<any> | ExecutionResult<TData>>;

[revmischa]

Same problem here

[amwill04]

Still no resolution to this?

[ffjanhoeck]

Same problem

[msweetland]

Reporting the same issues. A short-term workaround I found is only installing the modules of Amplify that are needed and not the entire library.

EX:
yarn add @aws-amplify/auth

Most likely will not solve your issues if you're using the module that requires the graphql types.

[silltho]

I'm facing the same issue. Any updates to fix this?

[mspoulsen]

Me too :(

[pbrianmackey]

Upgrading to "aws-amplify": "1.1.24-beta.10", fixed it for me

Note, I tried all the workarounds in this thread. In my case nothing worked.

[ColtenP]

Another work around for this issue is to just declare your .d.ts file and place the following inside of the file.
declare module 'graphql/language/ast' { export type DocumentNode = any }

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

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

[jono-allen]

I got around this by using patch package and patching @types/react-native with

interface Storage {}
interface Cache {}
interface File {}
interface ServiceWorker {}

[coleHafner]

Another work around for this issue is to just declare your .d.ts file and place the following inside of the file.
declare module 'graphql/language/ast' { export type DocumentNode = any }

Just in case anyone is wondering, the best place to declare this file is to create a types.d.ts file in src/. Fixed it for me!

[leopsidom]

Still having this problem with "aws-amplify": "^3.0.13"

[galbus]

@types/graphql is deprecated, because:

graphql provides its own type definitions

Try adding graphql as a dev dependency:

yarn add -D graphql

For me, this added "graphql": "^15.3.0" into devDependencies, and removed the error I was seeing from "aws-amplify": "^3.0.20".

[Ruu-i]

i added declare module 'graphql/language/ast' { export type DocumentNode = any } to my d.ts file after that I got this error import { GraphQLError } from 'graphql/error/GraphQLError';. so i added declare module 'graphql/error/GraphQLError'; in to my d.ts file. again I got error errors?: GraphQLError[];. how to fix it?

[nikhilavula]

installing graphql solved the problem for me.

https://www.npmjs.com/package/graphql

[Ruu-i]

@nikhilavula i tried it. it worked. but in the browser console show this error:

ERROR TypeError: Cannot read property 'viewContainerRef' of undefined
    at AuthenticatorComponent.push.XRHW.AuthenticatorComponent.loadComponent (authenticator.factory.js:47)
    at AuthenticatorComponent.push.XRHW.AuthenticatorComponent.ngOnInit (authenticator.factory.js:31)
    at callHook (core.js:4776)
    at callHooks (core.js:4746)
    at executeInitAndCheckHooks (core.js:4698)
    at refreshView (core.js:9153)
    at refreshComponent (core.js:10291)
    at refreshChildComponents (core.js:8935)
    at refreshView (core.js:9188)
    at refreshEmbeddedViews (core.js:10245)

I'm using amplify. i just added <amplify-authenticator></amplify-authenticator> in to auth.component.html