20

I am using Typescript 2.4.1 and have upgraded many packages in my project. Among them I upgraded Angular from 2 to 4.3.1. After many corrections in @types packages, the errors I am left with are:

\node_modules\@types\jquery\index.d.ts(2955,63): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(767,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(771,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(775,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(779,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(783,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(787,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(791,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(795,24): error TS2304: Build:Cannot find name 'Iterable'.
\node_modules\@types\three\three-core.d.ts(799,24): error TS2304: Build:Cannot find name 'Iterable'.

I have found many similar questions and answers and the prevailing solution is to target "es2015" and/or add lib: ["dom", "es2015", "es2015.iterable"]. I have tried all those and more but am still left with the same 'Iterable' error.

My updated tsconfig.json is thus:

{
    "compileOnSave": true,
    "compilerOptions": {
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "dom", "dom.iterable", "es2015", "es2015.iterable", "esnext" ],
        "module": "commonjs",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "noEmitOnError": true,
        "outDir": "./wwwroot/js",
        "removeComments": false,
        "rootDir": "./Client",
        "sourceMap": true,
        "suppressImplicitAnyIndexErrors": true,
        "target": "es2015",
        "typeRoots": [
            "./node_modules/@types",
            "./Client"
        ]
    },
    "exclude": [
        "node_modules",
        "wwwroot/lib"
    ],
    "filesGlob": [
        "./Client/**/*.ts"
    ]
}

My package.json is:

{
    "version": "1.0.0",
    "name": "web-server",
    "private": true,
    "dependencies": {
        "@angular/common": "^4.3.1",
        "@angular/compiler": "^4.3.1",
        "@angular/core": "^4.3.1",
        "@angular/forms": "^4.3.1",
        "@angular/http": "^4.3.1",
        "@angular/platform-browser": "^4.3.1",
        "@angular/platform-browser-dynamic": "^4.3.1",
        "@angular/router": "^4.3.1",
        "@angular/upgrade": "^4.3.1",
        "bootstrap": "3.3.7",
        "core-js": "2.4.1",
        "lodash": "4.17.4",
        "pixi.js": "4.5.4",
        "reflect-metadata": "0.1.10",
        "rxjs": "^5.4.2",
        "systemjs": "0.20.17",
        "three": "0.86.0",
        "zone.js": "0.8.14"
    },
    "devDependencies": {
        "@types/chai": "^4.0.1",
        "@types/jquery": "3.2.9",
        "@types/lodash": "4.14.71",
        "@types/mocha": "2.2.41",
        "@types/pixi.js": "4.5.2",
        "@types/three": "0.84.19",
        "bower": "^1.8.0",
        "gulp": "3.9.1",
        "gulp-clean": "^0.3.2",
        "gulp-concat": "^2.6.1",
        "gulp-typescript": "^3.2.1",
        "gulp-inline-ng2-template": "^4.0.0",
        "gulp-sourcemaps": "^2.6.0",
        "gulp-tsc": "^1.3.2",
        "gulp-uglify": "^3.0.0",
        "merge2": "^1.1.0",
        "path": "^0.12.7",
        "rimraf": "^2.6.1",
        "systemjs-builder": "^0.16.9",
        "typescript": "2.4.1"
    },
    "scripts": {
        "gulp": "gulp",
        "rimraf": "rimraf",
        "bundle": "gulp bundle",
        "postbundle": "rimraf dist"
    }
}

How can it be that "iterable" is not found after all those lib inclusions? The Typescript compiler does not ignore my tsconfig.json as changing some option gives various outputs, but none without errors.

My environment is Visual Studio 2015 update 3 with Typescript Tools 2.4.1. I am using npn @types (no typings). Verbose compilation output shows that Visual Studio effectively uses the 2.4.1 version.

And the most bizarre thing is that compiling using gulp gives no error using the same Typescript version and tsconfig.

Oliver H.
  • 321
  • 1
  • 2
  • 7
  • You sure you don't have a redundant tsconfig.json or tsconfig.app.json file in your app somewhere else that is overwriting one or more of those settings? Happened to me once... – diopside Aug 24 '17 at 21:28
  • 1
    Yes. I finally made the jump to VS2017 (which I didn't want initially) without upgrading typescript and everything is now fine. – Oliver H. Aug 27 '17 at 11:18

7 Answers7

39

'Iterable' is defined in the typings file for node. Installing file that solved the problem for me (node_modules/@types/node/index.d.ts).

npm install @types/node --save-dev
Evan Carroll
  • 78,363
  • 46
  • 261
  • 468
Will
  • 1,080
  • 12
  • 13
  • 2
    This was the solution that worked for me too. It seems the problem is that the current (as of this writing) version of the jQuery typings file from definitelytyped.org contains the line: `interface JQuery extends Iterable` which references Node, but it doesn't actually reference the node.d.ts type definitions. – Brad Westness Oct 23 '17 at 20:08
  • @BradWestness, this was exactly the reason. Thanks for finally finding the root cause of the problem. – Trygve Nov 10 '17 at 10:07
  • You're my hero. I was about to give up on Three.JS Typescript before I found this. – William Nov 30 '19 at 04:25
  • Apparently, Iterable is part of ES2016, so all you need to to is add ES2016 to lib. – Stefan Steiger Mar 30 '20 at 08:59
18

This looks very much what is described here:

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16939

So either try using 

"target": "es6"

as described there - or what works for us:

"target": "es5",
"lib": ["es2016","dom"]
Benjamin Seiller
  • 2,875
  • 2
  • 32
  • 42
2

Upgrading my whole environment, not the project, did the trick. I upgraded to VS2017 and everything now compiles fine.

There was probably a corruption in my install albeit I reinstalled nearly everything besides VS2015 itself.

Thanks everyone for the help.

Oliver H.
  • 321
  • 1
  • 2
  • 7
1

I have found that there could be a variety of reasons to start seeing these errors after any kind of major update or change, like upgrading angular for example.

The easiest way I have found to fix and identify any problems is to manually clean any build and config files, re-install the node modules and then rebuild the project.

Start by removing the contents of:

./dist
./node_modules

Remove package-lock.json NOT package.json

Run the following:

ng update
npm update
npm install

This will make sure that your Angular project is all up-to-date, keep an eye on the output as it might list problems that did not show up during compilation, the angular complier likes to be misleading sometimes.

Finally rebuild your angular project:

ng build

This should identify any problems and ensure that all the paths, configs and such are rebuilt.

Note: One thing to keep an eye out for if you are using ng build --watch or can't seem to identify a the compiler error, things can hang up in the background and I have noticed that there can also be a directory %40theme which I think is actually a copy of /dist. This directory will not show up in your solution explorer, if you start having these compiler errors try looking for directories and files that shouldn't be there and remove them, clean the project, re-open VS and re-run ng build

If things are still totally hosed, you can always try a full brute force clean to try and fix or identify problems:

Remove the Directories listed above then in your VS Project remove the following:

<Project>/bin/*
<Project>/obj/*

These are where VS keeps the compiled .dll files and other resources, this will force VS to rebuild everything.

Clean your solution and then try rebuilding the entire solution.

Andy Braham
  • 9,594
  • 4
  • 48
  • 56
0

Update: The solution below was causing deployment issues for me. A better solution was to only exclude all tsconfig.json files within the node_modules folder from the solution. Seems to be related to this Visual Studio issue.

I had a similar issue with the same versions of Visual Studio and TypeScript. Everything was working as expected in Visual Studio Code. I tried the other posted suggestions to no avail... the only thing that fixed it was to exclude the node_modules folder from my project but leave it in the solution.

Massimiliano Kraus
  • 3,638
  • 5
  • 27
  • 47
Charlah
  • 1
  • 2
0

Came upon this question recently when googling my problem and none of these solved my issue. I had to do some digging but finally found out that I had to include the es6 definition file to the top of my root typescript file:

///<reference path="./node_modules/typescript/lib/lib.es6.d.ts"/>
Evan Larsen
  • 9,935
  • 4
  • 46
  • 60
0

The best solution is to eliminate the deprecated typings and install the types you actually need yourself as @types

this is a good guide if you have complicated typings:

https://georgedyrra.com/2017/06/04/migrating-from-typings-to-npm-types/

This is my solved configuration. It really helps to use npm install to upgrade from angular 2 to 5, rather than trying to manually edit the package.json file.

Typings seems utterly messed up after converting project from angular 2 to angular 5

GeeWhizBang
  • 699
  • 4
  • 27