Utilizing es6-promise with TypeScript version 2.1.1 that targets ES5 and webpack in my project has presented some challenges.
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"
}
}
My approach to starting webpack involves using the following command line:
webpack --config config/webpack.common.js
The behavior observed is as follows:
- Webstorm version 2016.3.1 provides proper highlighting for all elements.
- The compiler successfully runs.
- The compiler does generate 2 errors
ERROR in [default] D:...\app.ts:4:16 Cannot find name 'Promise'.
In an attempt to address this issue, I tested various imports such as es6-promise, es6-promises, es6-promise-promise, and different import expressions.
After adding
import {Promise} from "es6-promise"Challenges with async
My objective includes enabling the usage of async/await, a feature I appreciate from C# due to its effectiveness in avoiding callback complexities. Upon modifying the code as shown below:
export class Foo {
async bar() : Promise<string>{
return "baz";
}
}
A new compilation error surfaces
Cannot find name 'Promise'.
Further attempts to rectify by importing
import {Promise} from "es6-promise";Duplicate identifier 'Promise'. Compiler reserves name 'Promise' in top level scope of a module containing async functions.