Getting errors while using ts-loader and babel-loader to convert typescript -> es6 and then to es5

Question

Hi there is my source code:

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules",
    "typings/browser",
    "typings/main",
    "typings/browser.d.ts"
  ]
}

package.json

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --inline --hot --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config webpack.production.config.js --progress --profile --bail",
    "postinstall": "typings install"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^2.2.4",
    "babel": "^6.5.2",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.22.0",
    "jasmine-core": "^2.4.1",
    "jshint": "^2.9.3",
    "jshint-loader": "^0.8.3",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "node-libs-browser": "^1.0.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "^2.0.2",
    "typings": "^1.3.2",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0"
  }
}

.babelrc

{
  "presets": [
    "es2015",
    "stage-0",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy" ]
}

webpack.base.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: [ 'babel-polyfill', './app/main.ts' ],

/*entry: {
    'polyfill': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './app/main.ts'    
  },*/

  resolve: {
    extensions: ['', '.js', '.ts']
  },

  module: {
    loaders: [
    {
       //test: /\.ts$/,
       //loaders: ['awesome-typescript-loader', 'angular2-template-loader']
       test: /\.ts$/, 
       loaders: ['babel-loader', 'ts-loader'],
       exclude: /node_modules/,
      },
      {
        test: /\.html$/,
        loader: 'html'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }      
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ]
};

webpack.development.config.js

var webpack = require('webpack');
var helpers = require('./helpers');
var webpackMerge = require('webpack-merge');
var baseConfig = require('./webpack.base.config.js');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = webpackMerge( baseConfig, {
    devtool: 'cheap-module-eval-source-map',

    output: {
        path: helpers.root('dist'),
        publicPath: 'http://localhost:8080/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

    plugins: [
        new ExtractTextPlugin('[name].css')
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }  
});

webpack.production.config.js

var webpack = require('webpack');
var helpers = require('./helpers');
var webpackMerge = require('webpack-merge');
var baseConfig = require('./webpack.base.config.js');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = webpackMerge( baseConfig, {
    devtool: 'cheap-module-eval-source-map',

    output: {
        path: helpers.root('dist'),
        publicPath: 'http://localhost:8080/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

    plugins: [
        new ExtractTextPlugin('[name].css')
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }  
});

after running webpack --progress command, get the bundle of errors:

ERROR in C:\Users\User\Desktop\ang_babel\node_modules\typescript\lib\lib.es6.d.ts                                                                                                                
(5538,14): error TS2687: All declarations of '[Symbol.toStringTag]' must have identical modifiers.                                                                                               

ERROR in C:\Users\User\Desktop\ang_babel\node_modules\typescript\lib\lib.es6.d.ts                                                                                                                
(5557,14): error TS2403: Subsequent variable declarations must have the same type.  Variable '[Symbol.toStringTag]' must be of type 'string', but here has type '"Math"'.                        

ERROR in C:\Users\User\Desktop\ang_babel\node_modules\typescript\lib\lib.es6.d.ts                                                                                                                
(5557,14): error TS2687: All declarations of '[Symbol.toStringTag]' must have identical modifiers.                                                                                               

ERROR in C:\Users\User\Desktop\ang_babel\typings\globals\core-js\index.d.ts                                                                                                                      
(3,14): error TS2300: Duplicate identifier 'PropertyKey'.                                                                                                                                        

ERROR in C:\Users\User\Desktop\ang_babel\typings\globals\core-js\index.d.ts                                                                                                                      
(127,5): error TS2300: Duplicate identifier '[Symbol.unscopables]'.                                                                                                                              
Child html-webpack-plugin for "index.html":                                                                                                                                                      
        + 1 hidden modules 

what is wrong ?

Answer 1

Well after long time research i found that core-js was breaking the application and was cause of error. I uninstalled core-js and problem has solved.

UPDATE

Babel includes a polyfill that includes a custom regenerator runtime and core-js.

this is why it happened. You don't need to include

"core-js": "registry:dt/core-js#0.0.0+20160725163759" 

into typings.json file when using babel.