declaration (.d.ts) file containing `declare module 'graphql/error/GraphQLError'; in index.d.ts in an angular project

Question

i'm using amplify in an angular project. when I run command ng serve I got this error.

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'. 'C:/Users/Ruwani Indrachapa/Documents/profileApp/profileApp1/node_modules/graphql/error/GraphQLError.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/error/GraphQLError';`

1 import { GraphQLError } from 'graphql/error/GraphQLError';
                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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'. 'C:/Users/Ruwani Indrachapa/Documents/profileApp/profileApp1/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';`

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

so I created a index.d.ts file in src and I added this line in to index.d.ts

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

after that I got this error in the console

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'. 'C:/Users/Ruwani Indrachapa/Documents/profileApp/profileApp1/node_modules/graphql/error/GraphQLError.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/error/GraphQLError';`

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

need to put declare module 'graphql/error/GraphQLError this line in a separate file or can I use the index.d.ts in src? i tried npm i graphql. after that browser console showing me this error

core.js:5973 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)

help me to fix this.

score 16 · Answer 1 · answered Jan 25 '21 at 09:51

16

The only way I could solve this was by installing graphql as a dev dependency

npm install graphql --save-dev

At the time the version of graphql was 15.4.0

answered Jan 25 '21 at 09:51

Wiz

477
5
17

score 9 · Answer 2 · answered Mar 27 '21 at 23:41

9

For me it was how I imported DataStore. I copied what the documentation did and imported it incorrectly like this:

import { DataStore } from  'aws-amplify';

The error went away after I changed the import to this:

import { DataStore } from  '@aws-amplify/datastore';

Documentation: https://docs.amplify.aws/lib/datastore/examples/q/platform/js

answered Mar 27 '21 at 23:41

dvanrensburg

1,351
1
14
21

5

You're a dang hero. I was doing `import Amplify from 'aws-amplify'` and doing `import { Amplify } from '@aws-amplify/core'` instead worked – Steven Evers May 12 '21 at 21:27

cintron · Answer 3 · 2021-04-16T18:23:41.757

For any googler trying to solve this, especially around importing Auth, I had to add a type shim so it would work.

In my case, the imports that where causing issues where graphql/error/GraphQLError and graphql/language/ast (which is really just exporting DocumentNode).

I ended up creating a graphql.shim.d.ts file and adding it to my interfaces dir — which is in my compilerOptions.path array in my tsconfig.json config (but really, any dir/file under that array should work):

declare module 'graphql/error/GraphQLError' {
    // tslint:disable-next-line:no-empty-interface
    export interface GraphQLError{}
}

declare module 'graphql/language/ast' {
    // tslint:disable-next-line:no-empty-interface
    export interface DocumentNode{}
}

I did not know where to put the file so I created a new directory under `src` and put it there, example: `src/type-definitions/graphql.shim.d.ts` — Víctor Gil, May 01 '21 at 19:24

score 3 · Answer 4 · answered May 03 '21 at 19:16

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'. 'xxx/node_modules/graphql/error/GraphQLError.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/error/GraphQLError'; 1 import { GraphQLError } from 'graphql/error/GraphQLError'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Just do the following to resolve your error in angular

Add index.d.ts under src with:

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

score 0 · Answer 5 · answered Sep 19 '22 at 14:25

Just came here to add, I had to create a file /src/modulename.d.ts with the "declare module 'modulename'; in it. I don't know if the filename needed to match the modulename but it worked for me this way.

Took me a bit to figure out where exactly this file needed to go, so I thought I'd post about here in case it helps someone else.

declaration (.d.ts) file containing `declare module 'graphql/error/GraphQLError'; in index.d.ts in an angular project

5 Answers5