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

Question

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 [email protected] 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?

Answer 1

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?

Answer 2

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"