graphql Typescript build failure on strict mode

[wlee221]

Before opening, please confirm:

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

JavaScript Framework

Angular

Amplify APIs

Authentication, GraphQL API

Amplify Categories

auth, function

Environment information

# Put output below this line
  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 340.74 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.5/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 94.0.4606.61
    Firefox: 92.0.1
    Safari: 15.0
  npmPackages:
    @angular-devkit/build-angular: ~12.2.7 => 12.2.7 
    @angular/animations: ~12.2.0 => 12.2.8 
    @angular/animations/browser:  undefined ()
    @angular/animations/browser/testing:  undefined ()
    @angular/cli: ~12.2.7 => 12.2.7 
    @angular/common: ~12.2.0 => 12.2.8 
    @angular/common/http:  undefined ()
    @angular/common/http/testing:  undefined ()
    @angular/common/testing:  undefined ()
    @angular/common/upgrade:  undefined ()
    @angular/compiler: ~12.2.0 => 12.2.8 
    @angular/compiler-cli: ~12.2.0 => 12.2.8 
    @angular/compiler/testing:  undefined ()
    @angular/core: ~12.2.0 => 12.2.8 
    @angular/core/testing:  undefined ()
    @angular/forms: ~12.2.0 => 12.2.8 
    @angular/platform-browser: ~12.2.0 => 12.2.8 
    @angular/platform-browser-dynamic: ~12.2.0 => 12.2.8 
    @angular/platform-browser-dynamic/testing:  undefined ()
    @angular/platform-browser/animations:  undefined ()
    @angular/platform-browser/testing:  undefined ()
    @angular/router: ~12.2.0 => 12.2.8 
    @angular/router/testing:  undefined ()
    @angular/router/upgrade:  undefined ()
    @aws-amplify/ui-angular: ^2.0.1-next.5 => 2.0.1-next.5 
    @types/jasmine: ~3.8.0 => 3.8.2 
    @types/node: ^12.11.1 => 12.20.27 (16.10.2)
    aws-amplify: ^4.3.0 => 4.3.1 
    jasmine-core: ~3.8.0 => 3.8.0 (3.9.0)
    karma: ~6.3.0 => 6.3.4 
    karma-chrome-launcher: ~3.1.0 => 3.1.0 
    karma-coverage: ~2.0.3 => 2.0.3 
    karma-coverage-coffee-example:  1.0.0 
    karma-jasmine: ~4.0.0 => 4.0.1 
    karma-jasmine-html-reporter: ~1.7.0 => 1.7.0 
    lib:  0.0.1 
    rxjs: ~6.6.0 => 6.6.7 (7.3.0)
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/internal-compatibility:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    tslib: ^2.3.0 => 2.3.1 (2.3.0, 1.14.1, 2.1.0)
    typescript: ~4.3.5 => 4.3.5 
    zone-mix:  undefined ()
    zone-node:  undefined ()
    zone-testing:  undefined ()
    zone.js: ~0.11.4 => 0.11.4 
    zone.js/async-test:  undefined ()
    zone.js/async-test.min:  undefined ()
    zone.js/fake-async-test:  undefined ()
    zone.js/fake-async-test.min:  undefined ()
    zone.js/jasmine-patch:  undefined ()
    zone.js/jasmine-patch.min:  undefined ()
    zone.js/long-stack-trace-zone:  undefined ()
    zone.js/long-stack-trace-zone.min:  undefined ()
    zone.js/mocha-patch:  undefined ()
    zone.js/mocha-patch.min:  undefined ()
    zone.js/proxy:  undefined ()
    zone.js/proxy.min:  undefined ()
    zone.js/sync-test:  undefined ()
    zone.js/sync-test.min:  undefined ()
    zone.js/task-tracking:  undefined ()
    zone.js/task-tracking.min:  undefined ()
    zone.js/webapis-media-query:  undefined ()
    zone.js/webapis-media-query.min:  undefined ()
    zone.js/webapis-notification:  undefined ()
    zone.js/webapis-notification.min:  undefined ()
    zone.js/webapis-rtc-peer-connection:  undefined ()
    zone.js/webapis-rtc-peer-connection.min:  undefined ()
    zone.js/webapis-shadydom:  undefined ()
    zone.js/webapis-shadydom.min:  undefined ()
    zone.js/wtf:  undefined ()
    zone.js/wtf.min:  undefined ()
    zone.js/zone-bluebird:  undefined ()
    zone.js/zone-bluebird.min:  undefined ()
    zone.js/zone-error:  undefined ()
    zone.js/zone-error.min:  undefined ()
    zone.js/zone-legacy:  undefined ()
    zone.js/zone-legacy.min:  undefined ()
    zone.js/zone-patch-canvas:  undefined ()
    zone.js/zone-patch-canvas.min:  undefined ()
    zone.js/zone-patch-cordova:  undefined ()
    zone.js/zone-patch-cordova.min:  undefined ()
    zone.js/zone-patch-electron:  undefined ()
    zone.js/zone-patch-electron.min:  undefined ()
    zone.js/zone-patch-fetch:  undefined ()
    zone.js/zone-patch-fetch.min:  undefined ()
    zone.js/zone-patch-jsonp:  undefined ()
    zone.js/zone-patch-jsonp.min:  undefined ()
    zone.js/zone-patch-message-port:  undefined ()
    zone.js/zone-patch-message-port.min:  undefined ()
    zone.js/zone-patch-promise-test:  undefined ()
    zone.js/zone-patch-promise-test.min:  undefined ()
    zone.js/zone-patch-resize-observer:  undefined ()
    zone.js/zone-patch-resize-observer.min:  undefined ()
    zone.js/zone-patch-rxjs:  undefined ()
    zone.js/zone-patch-rxjs-fake-async:  undefined ()
    zone.js/zone-patch-rxjs-fake-async.min:  undefined ()
    zone.js/zone-patch-rxjs.min:  undefined ()
    zone.js/zone-patch-socket-io:  undefined ()
    zone.js/zone-patch-socket-io.min:  undefined ()
    zone.js/zone-patch-user-media:  undefined ()
    zone.js/zone-patch-user-media.min:  undefined ()
  npmGlobalPackages:
    @angular/cli: 12.2.6
    @aws-amplify/cli: 6.1.0
    @changesets/cli: 2.16.0
    npm: 6.14.15
    verdaccio-memory: 10.0.0
    verdaccio: 5.1.4
    vue-dts-gen: 0.3.0

Describe the bug

When TypeScript strict mode is on, ie. "strict": true is set on tsconfig.json, TypeScript will emit the following errors:

Error: node_modules/@aws-amplify/api-graphql/lib-esm/types/index.d.ts:1:30 - error TS7016: Could not find a declaration file for module 'graphql/error/GraphQLError'. '/Users/willeea/Documents/amplify/sev2/angular-strict-issue3376/node_modules/graphql/error/GraphQLError.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql/error/GraphQLError';`

1 import { GraphQLError } from 'graphql/error/GraphQLError';
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@aws-amplify/api-graphql/lib-esm/types/index.d.ts:2:30 - error TS7016: Could not find a declaration file for module 'graphql/language/ast'. '/Users/willeea/Documents/amplify/sev2/angular-strict-issue3376/node_modules/graphql/language/ast.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql/language/ast';`

2 import { DocumentNode } from 'graphql/language/ast';

This is because the graphql version on aws-amplify is pinned to 14.0.0 (src) that does not have type declaration. This is resolved in graphql/graphql-js#2102, which adds TypeScript typings in their source files and was released in 14.5.0. Note that @types/graphql has been deprecated as part of the graphql/graphql-js#2102 change.

We should look to upgrade to 14.5.0 after validating for possible regressions.

Workaround

As a workaround, customer can write their own types.d.ts with the following content

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

or they can install the deprecated @types/graphql@14, which will give them npm warnings.

related: #2365, closed by stalebot.

Expected behavior

No graphql types error should be present when typescript strict mode is on.

Reproduction steps

This is reproducible from getting started guide for Angular, which turns on Strict Mode by default on the latest Angular cli. https://docs.amplify.aws/start/getting-started/installation/q/integration/angular/

I also provided a reproducible repo below.

Code Snippet

Repo Link: https://github.com/wlee221/amplify-angular-12/tree/without-workaround

$ yarn && yarn start

will show you the error.

Log output

// Put your logs below this line
Error: node_modules/@aws-amplify/api-graphql/lib-esm/types/index.d.ts:1:30 - error TS7016: Could not find a declaration file for module 'graphql/error/GraphQLError'. '/Users/willeea/Documents/amplify/sev2/angular-strict-issue3376/node_modules/graphql/error/GraphQLError.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql/error/GraphQLError';`

1 import { GraphQLError } from 'graphql/error/GraphQLError';
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@aws-amplify/api-graphql/lib-esm/types/index.d.ts:2:30 - error TS7016: Could not find a declaration file for module 'graphql/language/ast'. '/Users/willeea/Documents/amplify/sev2/angular-strict-issue3376/node_modules/graphql/language/ast.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql/language/ast';`

2 import { DocumentNode } from 'graphql/language/ast';

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.