Using es6-promise with TypeScript 2.1 ES5 Webpack (async/await)

Question

I try to use es6-promise with TypeScript 2.1.1 targeting ES5 and webpack.

app.ts

import "es6-promise/auto";

export class Foo {
    bar() : Promise<string>{
        return Promise.resolve("baz");
    }
}

webpack.common.js

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=>global!exports?global.Promise!es6-promises'
        }),

    ]
};

package.json

{
  "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"
  }
}

I start webpack using the command line

webpack --config config/webpack.common.js

The behavior is the following:

Webstorm 2016.3.1 highlights everything fine.
compiler runs
compiler shows 2 errors

ERROR in [default] D:...\app.ts:4:16 Cannot find name 'Promise'.

I tried es6-promise, es6-promises, es6-promise-promiseand a bunch of import expressions.

When I add import {Promise} from "es6-promise" 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.

Problems with async

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

export class Foo {
    async bar() : Promise<string>{
        return "baz";
    }
}

The compiler complains again

Cannot find name 'Promise'.

Adding the import import {Promise} from "es6-promise"; makes it even worse.

Duplicate identifier 'Promise'. Compiler reserves name 'Promise' in top level scope of a module containing async functions.

This should answer your question: http://stackoverflow.com/questions/27573365/how-to-use-typescript-with-native-es6-promises — Adam Kettani, Nov 25 '16 at 08:39
Hmm one comment of the answer helped. Adding the reference to the typing in app.ts helped. `///`. I don't have to import it in any file. — Sven-Michael Stübe, Nov 25 '16 at 08:54
You should also do: entry: { 'es6-promise', 'app': './app.ts', }, — Leonardo Venoso, Jul 13 '17 at 18:06

score 9 · Accepted Answer · edited Nov 28 '16 at 10:52

9

You can make the TypeScript compiler aware of ES2015 promises by adding "es2015.promise" to the list of library files to include in your tsconfig.json:

{
    "compilerOptions": {
        "lib": [
            "dom",
            "es5",
            "scripthost",
            "es2015.promise"
        ]
    }
}

Native promises were only introduced in ES2015 and are not available in ES5, which you're targeting. That's why the TypeScript compiler says it can't find the name Promise. Since you're providing a polyfill, there will be a Promise at runtime. The above solution makes TypeScript aware of that.

Edit Sven-Michael

You don't even need provide Promise via provide plugin. You just need to import "es6-promise/auto";

edited Nov 28 '16 at 10:52

Sven-Michael Stübe

14,560
4
52
103

answered Nov 25 '16 at 09:22

Marius Schulz

15,976
12
63
97

i think this is an incorrect solution. true typescript will aware of ES6 promise. but still the compiler target is ES5. when we are using the compiled script on ES5 browser, we will got error `Promise` not found. – GusDeCooL Nov 24 '17 at 03:45
The key part here is _"Since you're providing a polyfill, there will be a Promise at runtime."_ TypeScript doesn't polyfill `Promise` itself; therefore, _you_ need to provide a polyfill so that `Promise` will be available at runtime even in older browsers. The `lib` compiler option only tells TypeScript that it can expect to have a working `Promise` at runtime. – Marius Schulz Nov 24 '17 at 10:01

score 1 · Answer 2 · answered Jul 13 '17 at 18:08

1

You can also use es6-promise polyfill. You can reference it in the following way (Typescript + Webpack2):

entry: {
    'es6-promise',    
    'app': './app.ts',
}

answered Jul 13 '17 at 18:08

Leonardo Venoso

1,203
12
15

Using es6-promise with TypeScript 2.1 ES5 Webpack (async/await)

Problems with async

2 Answers2