graphql-subscriptions: Cannot find name 'AsyncIterator' error in Typescript compilation process.

Thanks!! By adding:

"compilerOptions": {
  "lib": [
     "esnext.asynciterable"
   ],
. . .

to tsconfig.json file fixed the issue for good.

@Parziphal, agree.

I think this problem is there because of the fact that TypeScript has the default "lib" option defined somewhere in the code.

So, in order to fix that problem, you need to include all of the libraries that "lib" option contains by default. Those are:

"es5",
"es6",
"dom",
"es2015.core",
"es2015.collection",
"es2015.generator",
"es2015.iterable",
"es2015.promise",
"es2015.proxy",
"es2015.reflect",
"es2015.symbol",
"es2015.symbol.wellknown",
"esnext.asynciterable"

So, this solves the problem, - you just need to set the "lib" TypeScript compiler option to the array of default libraries concatenaed with the "esnext.asynciterable" library, like this:

{
  "compilerOptions": {
    // ...
    "lib": [
      "es5",
      "es6",
      "dom",
      "es2015.core",
      "es2015.collection",
      "es2015.generator",
      "es2015.iterable",
      "es2015.promise",
      "es2015.proxy",
      "es2015.reflect",
      "es2015.symbol",
      "es2015.symbol.wellknown",
      "esnext.asynciterable"
    ]
  },
  // ...
}

I also faced with the same issue:

adding “esnext” to the “lib” fixed my problem. "lib": ["es6", "dom", "esnext"],

https://github.com/graphcool-examples/angular-graphql/pull/8/files

I think we can use esnext lib to fix this issue. See below link

https://github.com/apollographql/graphql-subscriptions/issues/77

If I add the lib array to compilerOptions, I get hundreds of errors because everything breaks (even Date becomes unavailable). Adding the interface to the files where the error occurs fixed the problem.

+1 for major annoyance!

I had the same problem and the following change to tsconfig.json did the trick:

• Add skipLibCheck: true to compilerOptions

Example tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "skipLibCheck": true,
    "jsx": "react"
  },
  "include": [
    "./src/**/*"
  ],
  "lib": [
    "esnext",
  ],
}

This has become a major annoyance for me as well, having ‘fixed’ it a while ago but now it seems to be an issue again and no combination of “lib”: […] seems to work now

There are two tsconfig.json (one in root folder and another in src/ folder) files when working with an Angular app installed with CLI. The problem gets fixed when I put “esnext” within src/tsconfig.json:

"lib": [ "es2015", "dom", "esnext" ]

None of the solutions work 😃 Adding EsNext does nothing for me, throws the error on browser.

FWIW, the only fix that worked for me was this exact tsconfig.json:

TL;DR: the only thing in lib is esnext – esnext.asynciterable alone yielded the following error:

error TS2318: Cannot find global type ‘Boolean’. error TS2318: Cannot find global type ‘Function’. error TS2318: Cannot find global type ‘Number’. error TS2318: Cannot find global type ‘Object’. error TS2318: Cannot find global type ‘RegExp’.

{
  "compilerOptions": {
    /* Basic Options */
    "target": "ES2017",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": [                                  /* Specify library files to be included in the compilation:  */
      "esnext"
    ],                             
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    "outDir": "./dist",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,                            /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    "noUnusedLocals": true,                /* Report errors on unused locals. */
    "noUnusedParameters": true            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */

    /* Source Map Options */
    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  }
}

I should also note that the default library list changes when compilerOptions.target gets changed.

So, you should probably go here, find --lib option, and look at the defaults which fit your needs.

I stumbled upon this issue while trying the hello world tutorial for Apollo with TypeScript. Indeed just adding esnext.asynciterable fixed the issue

Just adding esnext.asynciterable worked for me:

"lib": ["es6", "esnext.asynciterable", "dom"],

This is becoming a real blocker now!

I have added the lib stuff to the tsconfig.json and it compiles without error. But now I am loading another module via package.json that we have written ourselves (which compiles itself without errors) and it breaks the npm install with the same AsyncIterator Error.

So each projects compiles without errors, but when I import the other project then the build fails. What is going on here?

Is there a fix on the way? It’s been a couple of months now

@danielpa9708 just esnext alone saves the day. But don’t know if there’s any performance loss by doing that.

Thanks to @leebenson. All I had to have was only "esnext".

Hrm, adding the big list of options to lib didn’t work for me. I got a bunch of other errors

node_modules/apollo-client/transport/afterware.d.ts(4,15): error TS2304: Cannot find name 'Response'.
node_modules/apollo-client/transport/afterware.d.ts(5,14): error TS2304: Cannot find name 'RequestInit'.
node_modules/apollo-client/transport/afterware.d.ts(11,16): error TS2304: Cannot find name 'Response'.
node_modules/apollo-client/transport/afterware.d.ts(12,14): error TS2304: Cannot find name 'RequestInit'.
node_modules/apollo-client/transport/batchedNetworkInterface.d.ts(8,14): error TS2304: Cannot find name 'RequestInit'.
node_modules/apollo-client/transport/batchedNetworkInterface.d.ts(11,16): error TS2304: Cannot find name 'Response'.
node_modules/apollo-client/transport/batchedNetworkInterface.d.ts(12,14): error TS2304: Cannot find name 'RequestInit'.
node_modules/apollo-client/transport/batchedNetworkInterface.d.ts(22,20): error TS2304: Cannot find name 'RequestInit'.
node_modules/apollo-client/transport/batchedNetworkInterface.d.ts(36,12): error TS2304: Cannot find name 'RequestInit'.
node_modules/apollo-client/transport/middleware.d.ts(5,14): error TS2304: Cannot find name 'RequestInit'.
node_modules/apollo-client/transport/middleware.d.ts(12,14): error TS2304: Cannot find name 'RequestInit'.
node_modules/apollo-client/transport/networkInterface.d.ts(35,12): error TS2304: Cannot find name 'RequestInit'.
node_modules/apollo-client/transport/networkInterface.d.ts(43,14): error TS2304: Cannot find name 'RequestInit'.
node_modules/apollo-client/transport/networkInterface.d.ts(46,15): error TS2304: Cannot find name 'Response'.
node_modules/apollo-client/transport/networkInterface.d.ts(47,14): error TS2304: Cannot find name 'RequestInit'.
node_modules/apollo-client/transport/networkInterface.d.ts(54,12): error TS2304: Cannot find name 'RequestInit'.
node_modules/apollo-client/transport/networkInterface.d.ts(55,49): error TS2304: Cannot find name 'RequestInit'.
node_modules/apollo-client/transport/networkInterface.d.ts(63,77): error TS2304: Cannot find name 'Response'.
node_modules/apollo-client/transport/networkInterface.d.ts(70,12): error TS2304: Cannot find name 'RequestInit'.

Note that there is a small risk with using “esnext” instead of “esnext.asynciterable” specifically: “esnext” will allow you to use any new JS features supported by TypeScript regardless of whether or not you have a polyfill for them. So be mindful of which ES2016+ features you’re using and use something like https://polyfill.io if you want broad browser support.

The only sane reply here. The question is, whether the graphql library uses the feature or just produces a polyfilled fake of the interface. If the later is the case, adding es2018.asynciterable or esnext.asynciterable to lib in tsconfig.json is okay. If the former is the case, you need to polyfill the feature.

Installing Graphql types solved my case:

npm install --save-dev @types/graphql

 "esnext.asynciterable"

including it giving me error

" let wopt: WatchQueryOptions; wopt = { fetchPolicy: ‘network-only’,//FetchPolicy,//‘cache-and-network’, query: type, variables: params } this.apollo. watchQuery<Query>(wopt) .valueChanges .subscribe((val) => { }

(in promise): TypeError: Object(…) is not a function TypeError: Object(…) is not a function"

Note that there is a small risk with using “esnext” instead of “esnext.asynciterable” specifically: “esnext” will allow you to use any new JS features supported by TypeScript regardless of whether or not you have a polyfill for them. So be mindful of which ES2016+ features you’re using and use something like https://polyfill.io if you want broad browser support.

My local environment (node 6) doesn’t yet support AsyncIterables so I believe putting it in tsconfig:lib is incorrect and could lead to other parts of the project compiling when they shouldn’t.

This project should define AsyncIterator with a compatible definition instead of relying on the definition from the library. This will also make less peoples projects break when they use your project.

Hi guys I’m having the same problem: ERROR in /Users/danielezurico/Downloads/angular-graphql-master/quickstart-with-apollo/node_modules/@types/graphql/subscription/subscribe.d.ts (17,4): Cannot find name 'AsyncIterator'. ERROR in /Users/danielezurico/Downloads/angular-graphql-master/quickstart-with-apollo/node_modules/@types/graphql/subscription/subscribe.d.ts (29,4): Cannot find name 'AsyncIterable'.

I tried to add "lib": [ "es5", "es6", "dom", "es2015.core", "es2015.collection", "es2015.generator", "es2015.iterable", "es2015.promise", "es2015.proxy", "es2015.reflect", "es2015.symbol", "es2015.symbol.wellknown", "esnext.asynciterable" ] my package.json is: https://github.com/graphcool-examples/angular-graphql/blob/master/quickstart-with-apollo/package.json