webpack TS2304 Cannot find name 'Map', 'Set', 'Promise'

I have the following webpack.config.js

var path = require("path");
var webpack = require('webpack');

module.exports = {
  entry: {
    'ng2-auto-complete': path.join(__dirname, 'src', 'index.ts')
  },
  resolve: {
    extensions: ['', '.ts', '.js', '.json', '.css', '.html']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: "[name].umd.js",
    library: ["[name]"],
    libraryTarget: "umd"
  },
  externals: [
    /^rxjs\//,    //.... any other way? rx.umd.min.js does work?
    /^@angular\//
  ],
  devtool: 'source-map',
  module: {
    loaders: [
      { // Support for .ts files.
        test: /\.ts$/,
        loaders: ['ts', 'angular2-template-loader'],
        exclude: [/test/, /node_modules\/(?!(ng2-.+))/]
      }
    ]
  }
};

and the following tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitHelpers": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": true,
    "allowUnusedLabels": true,
    "noImplicitAny": false,
    "noImplicitReturns": false,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": false,
    "allowSyntheticDefaultImports": true,
    "suppressExcessPropertyErrors": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "dist",
    "baseUrl": "src"
  },
  "files": [
    "src/index.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "buildOnSave": false
}

When I run tsc command as the following, it all works fine.

ng2-auto-complete (master)$ tsc --declaration
ng2-auto-complete (master)$ 

When I run webpack command, it shows typescript compile errors.

ng2-auto-complete (master)$ webpack
ts-loader: Using typescript@2.0.0 and /Users/allen/github/ng2-auto-complete/tsconfig.json
Hash: bd6c50e4b9732c3ffa9d
Version: webpack 1.13.2
Time: 5041ms
                       Asset     Size  Chunks             Chunk Names
    ng2-auto-complete.umd.js  24.4 kB       0  [emitted]  ng2-auto-complete
ng2-auto-complete.umd.js.map  28.4 kB       0  [emitted]  ng2-auto-complete
    + 11 hidden modules

ERROR in /Users/allen/github/ng2-auto-complete/node_modules/@angular/platform-browser/src/dom/dom_renderer.d.ts
(18,37): error TS2304: Cannot find name 'Map'.

ERROR in /Users/allen/github/ng2-auto-complete/node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts
(96,42): error TS2304: Cannot find name 'Map'.

ERROR in /Users/allen/github/ng2-auto-complete/node_modules/@angular/platform-browser/src/web_workers/worker/location_providers.d.ts
(21,86): error TS2304: Cannot find name 'Promise'.
...
ng2-auto-complete (master)$ 

I don't know what I am missing for webpack and typescript compilation.

node_modules has been excluded in tsconfig.json

"exclude": [ "node_modules" ],

and type definitions are there in node_modules

  "devDependencies": {
    "@types/core-js": "^0.9.32",
    "@types/node": "^6.0.31"

I also tried to use typings.json and typings directory without success.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160815222444"
  }
}

FYI, versions

$ node --version
v5.7.1
$ npm --version
3.6.0
$ tsc --version
Version 2.0.0

How do I get rid of TS2304 errors with webpack command?

I added this to work in tsconfig.json, and it seems working without any error.

  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "es6", "dom"],  <--- this
    ...
  }

I am not sure lib are for Typescript 2.0 function or not, but found out there are several libraries are available

From the typescript config schema (note the es2015.collection)

 "lib": {
      "description": "Specify library file to be included in the compilation. Requires TypeScript version 2.0 or later.",
      "type": "array",
      "items": {
        "type": "string",
        "enum": [ "es5", "es6", "es2015", "es7", "es2016", "es2017", "dom", "webworker", "scripthost", "es2015.core", "es2015.collection", "es2015.generator", "es2015.iterable",
                    "es2015.promise", "es2015.proxy", "es2015.reflect", "es2015.symbol", "es2015.symbol.wellknown", "es2016.array.include", "es2017.object", "es2017.sharedmemory" ]
      }
    }

This solves the compile errors, but I still wonder why tsc command works without any errors, but webpack does not. tsc searches for all possible libraries without using lib by tsconfig.json?

Map, Set and Promise are ES6 features.
In your tsconfig.json you are using:

"target": "es5" 

This causes the compiler to use the normal es5 lib.d.ts, which lacks the definitions for the above types.

You want to use the lib.es6.d.ts:

"target": "es6" 

Just add:

 "lib": ["es6"] // means at least ES6

Don't change target. Target is used to tell Typescript into which version of ECMAScript to compile your .ts files. Of course, you can change it, if the browser your application will be running in, will support that version of ECMAScript.

For example, I use "target": "es5" and "lib": ["es6"] .

---

Another reason could be:

That your .ts file is not under "rootDir": "./YourFolder",

If you are wondering why none of these fixes work for you keep in mind -- if you specify the file to compile on the command line or package.json tsc will NOT read your tsconfig.json file and therefore have no effect. Instead specify the "files" and "outDir" in your tsconfig.json and one of the "lib" fixes will probably work for you. Then compile with only:

tsc --sourcemaps

tsc index.ts --lib "es6"

If adding lib not working in tsconfig.json, using above command line option

I had to install the core-js typings from npm to solve the issue

npm install @types/core-js

explanation:
The goal of @types npm packages is to obtain type definitions with npm. Using these type definitions is a TypeScript 2.0 feature .

@types replace current tools such as typings and tsd, though these will continue to be supported for some time.

https://stackoverflow.com/a/44800490/9690407

npm install typings -g
typings install

is deprecated in npm 5.6.0! Instead use the npm install @types/core-js syntax.

Since the answer directly to the OP has been answered already, I figured I would add what fixed it for me. My situation was slightly different in that I was not using WebPack and was getting these errors when trying to use tsc. The answer everyone else is giving (add "es6" to lib) did not resolve it for me. The problem for me was that I had v9.11.1 of node installed on my machine, but I had used npm to grab "@types/node", which got the most recent, v10+. Once I uninstalled that node typing and installed a specific v9 node typing file, this issue was resolved.

I'm using node.js v10.16.3. The problem for me was that the typescript compiler was ignoring my tsconfig.json file.

Three solutions worked for me:

1. Install ts-node and use that instead to compile and run the file
2. Do tsc filename.ts --lib "es6", "dom" when you compile the file
3. Install @types/node which will allow you to run tsc filename.ts without errors.

To resolve this error change the following properties in tsconfig.json file.

"lib": [
      "es2018",
      "dom",
      "es5", 
      "es6"
    ],
"module": "es2015",
"target": "es6"

After that run following command in the terminal.

npm install @types/es6-shim

ERROR RESOLVED.

In your tsconfig.json just change "target": "es5" to "target": "es6"

To solve this you only need to import map method in your ts file like this:

import { map } from 'rxjs/operators';

for es6 use this

tsc filename.ts --lib es2015

For me the solution was to install @types/node:

yarn add @types/node --dev

Or if you prefer npm:

npm install @types/node --dev

However, I suppose that if you plan to continue using "Map", "Set" or "Promise", it's good practice to include "es6" in the "lib" array in tsconfig.json anyways.

In my case I had to run:

npm install typings -g
typings install

That solved my problem.