How to setup TypeScript + Babel + Webpack?

Question

I have these dependencies:

"devDependencies": {   "@types/node": "^4.0.27-alpha",   "babel-core": "^6.10.4",   "babel-loader": "^6.2.4",   "babel-polyfill": "^6.9.1",   "babel-preset-es2015": "^6.9.0",   "babel-preset-stage-0": "^6.5.0",   "ts-loader": "^0.8.2",   "typescript": "^2.0.0",   "webpack": "^1.13.1" } 

.babelrc

{   "presets": [     "es2015",     "stage-0"   ] } 

tsconfig.json

{     "compilerOptions": {         "module": "commonjs",         "target": "es6",         "noImplicitAny": false,         "sourceMap": false,         "outDir": "built"     },     "exclude": [         "node_modules"     ] } 

webpack.config.js

module.exports = {   entry: ['babel-polyfill', './src/'],   output: {     path: __dirname,     filename: './built/bundle.js',   },   resolve: {     modulesDirectories: ['node_modules'],     extensions: ['', '.js', '.ts'],   },   module: {     loaders: [{       test: /\.tsx?$/, loaders: ['ts-loader', 'babel-loader'], exclude: /node_modules/     }],   } }; 

/src/index.ts

async function foo() {   const value = await bar();   console.log(value); }  function bar() {   return new Promise((resolve, reject) => {     return resolve(4);   }); }  (async function run() {   await foo(); }()); 

With this setup it does work, I can build and run it (logs 4 correctly). However I'm always getting some errors on webpack:

ERROR in ./src/index.ts (4,32): error TS2304: Cannot find name 'regeneratorRuntime'.  ERROR in ./src/index.ts (6,12): error TS2304: Cannot find name 'regeneratorRuntime'.  ERROR in ./src/index.ts (31,451): error TS2346: Supplied parameters do not match any signature of call target.  ERROR in ./src/index.ts (40,33): error TS2304: Cannot find name 'regeneratorRuntime'.  ERROR in ./src/index.ts (41,12): error TS2304: Cannot find name 'regeneratorRuntime'. 

It seems it has something to do with babel-polyfill.

What am I missing?

Answer 1

Babel 7 does not need ts-loader.

As of Babel 7 the ts-loader is unnecessary, because Babel 7 understands TypeScript. Complete details of a TypeScript + Babel7 + Webpack setup are here.

An overview of the set up without ts-loader.

Install Babel's TypeScript support. Only @babel/preset-typescript is mandatory; the other three add additional features that TypeScript supports.

npm install --save-dev @babel/preset-typescript  npm install --save-dev @babel/preset-env  npm install --save-dev @babel/plugin-proposal-class-properties  npm install --save-dev @babel/plugin-proposal-object-rest-spread 

Configure the additional .babelrc plugins and presets.

{     "presets": [         "@babel/preset-env",         "@babel/preset-typescript"     ],     "plugins": [         "@babel/proposal-class-properties",         "@babel/proposal-object-rest-spread"     ] } 

And update your webpack.config.js (other code is omitted for clarity).

module: {   rules: [   {      test: /\.(js|jsx|tsx|ts)$/,      exclude: /node_modules/,      loader: 'babel-loader'     }   ] }, resolve: {   extensions: ['*', '.js', '.jsx', '.tsx', '.ts'], }, 

Answer 2

Loaders always execute right to left, so changing to

test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/ 

Fixed the issue since it is going to run ts-loader first.

Full webpack.config.js file

module.exports = {   entry: ['babel-polyfill', './src/'],   output: {     path: __dirname,     filename: './dist/index.js',   },   resolve: {     extensions: ['', '.js', '.ts'],   },   module: {     loaders: [{       test: /\.ts$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/     }],   } }; 

Sample project brunolm/typescript-babel-webpack