title: Using es6-promise with TypeScript 2.1 ES5 Webpack (async/await)
body: <p>I try to use <code>es6-promise</code> with TypeScript 2.1.1 targeting ES5 and webpack.</p>
  
  <p><strong>app.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import "es6-promise/auto";
  
  export class Foo {
      bar() : Promise&lt;string&gt;{
          return Promise.resolve("baz");
      }
  }
  </code></pre>
  
  <p><strong>webpack.common.js</strong></p>
  
  <pre><code>const path = require('path');
  var webpack = require('webpack');
  
  module.exports = {
      entry: {
          'app': './app.ts',
      },
  
      output: {
          path: 'dist/ie',
          filename: '[name].js'
      },
  
      resolve: {
          extensions: ['', '.ts', '.js']
      },
  
      devtool: 'source-map',
  
      module: {
          loaders: [
              {
                  test: /\.ts$/,
                  loaders: ['awesome-typescript-loader']
              },
          ]
      },
      plugins: [  
          new webpack.ProvidePlugin({
              Promise: 'imports?this=&gt;global!exports?global.Promise!es6-promises'
          }),
  
      ]
  };
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "foo",
    "ieArtifactName": "foo",
    "version": "3.0.0-1",
    "description": "...",
    "main": "src/app.ts",
    "author": {
      "name": "...",
      "email": "...",
      "url": "..."
    },
    "dependencies": {
      "@types/es6-promise": "0.0.32",
      "@types/jquery": "^2.0.34",
      "@types/underscore": "^1.7.34",
      "es6-promise": "^4.0.5",
      "es6-promise-promise": "^1.0.0",
      "es6-promises": "^1.0.10",
      "rxjs": "5.0.0-beta.12",
      "zone.js": "^0.6.23"
    },
    "devDependencies": {
      "awesome-typescript-loader": "=2.2.4",
      "clean-webpack-plugin": "^0.1.14",
      "css-loader": "^0.26.0",
      "exports-loader": "^0.6.3",
      "http": "0.0.0",
      "https": "^1.0.0",
      "imports-loader": "^0.6.5",
      "load-grunt-tasks": "^3.5.2",
      "node-static": "^0.7.9",
      "pug": "^2.0.0-beta6",
      "pug-html-loader": "^1.0.9",
      "raw-loader": "^0.5.1",
      "sass-loader": "^4.0.2",
      "style-loader": "^0.13.1",
      "typescript": "^2.1.1",
      "webpack": "^1.13.3",
      "webpack-dev-server": "^1.14.1",
      "webpack-merge": "^0.14.0"
    }
  }
  </code></pre>
  
  <p>I start webpack using the command line</p>
  
  <pre><code>webpack --config config/webpack.common.js
  </code></pre>
  
  <p>The behavior is the following:</p>
  
  <ul>
  <li>Webstorm 2016.3.1 highlights everything fine.</li>
  <li>compiler runs</li>
  <li>compiler shows 2 errors
  
  <blockquote>
    <p>ERROR in [default] D:...\app.ts:4:16 
    Cannot find name 'Promise'.</p>
  </blockquote></li>
  </ul>
  
  <p>I tried <code>es6-promise</code>, <code>es6-promises</code>, <code>es6-promise-promise</code>and a bunch of import expressions.</p>
  
  <p>When I add <code>import {Promise} from "es6-promise"</code> webstorm highlights it as unused import but the error is gone. Is it possible to use Promises targeting ES5 without import? Because after changing the target to ES6 I'd have to touch every file and remove the import.</p>
  
  <h2>Problems with async</h2>
  
  <p>My goal is to be able to use async/await, because I'm used to it from C# and I hate the callback hell. If I change the code to </p>
  
  <pre><code>export class Foo {
      async bar() : Promise&lt;string&gt;{
          return "baz";
      }
  }
  </code></pre>
  
  <p>The compiler complains again </p>
  
  <blockquote>
    <p>Cannot find name 'Promise'.</p>
  </blockquote>
  
  <p>Adding the import <code>import {Promise} from "es6-promise";</code> makes it even worse.</p>
  
  <blockquote>
    <p>Duplicate identifier 'Promise'. Compiler reserves name 'Promise' in top level scope of a module containing async functions.</p>
  </blockquote>