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

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 typescript@3.2.2 and @aws-amplify/api @1.0.23. 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

Add @types/graphql as a dev dependency
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:

Create a new typescript app (we use create-react-app-ts)
Add a dependency on @aws-amplify/api
Try to build
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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 20
Comments: 23

Commits related to this issue

fix(api): Add @types/graphql dependency - Add type guard for DocumentNode - Refactor `getGraphqlOperationType` Fixes #2365 Fixes #2362 — committed to manueliglesias/aws-amplify by manueliglesias 6 years ago

Most upvoted comments

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

+13

galbus on Jul 19, 2020

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 }

+11

ColtenP on Nov 20, 2019

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?

hi @Ruu-i try:

declare module 'graphql/language/ast' { export type DocumentNode = any }
declare module 'graphql/error/GraphQLError' { export type GraphQLError = any }

CGarces on Mar 3, 2021

installing graphql solved the problem for me.

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

nikhilavula on Nov 29, 2020

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.

msweetland on Mar 2, 2019

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!

coleHafner on Jun 30, 2020

Same problem here

revmischa on Feb 3, 2019

Install npm install graphql --save-dev

javadtaghia on Oct 3, 2021

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.

pbrianmackey on Oct 24, 2019

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>>;

samuelcastro on Jan 3, 2019