Does anyone now anything about this Angular2-Webpack error that I'm getting: Duplicate indentifier?

Question

I've setup webpack following Anglular(2).io guide, but didn't work, so I've found something online to add but still doesn't work and I'm still getting these errors (hundred of it) (after I run 'npm start'):

[default] /Users/username/Desktop/Angular2-app/node_modules/@types/core-js/index.d.ts:21:13
Duplicate identifier 'PropertyKey'

[default] /Users/username/Desktop/Angular2-app/node_modules/@types/core-js/index.d.ts:1513:4
Duplicate identifier 'export='.

The structure of my project is this below:

-/dist (empty)
-/nodule_modules
-/src
--/app
---/assets
---/components
---/services
---/shared
---/app.component.css
---/app.component.ts
---/app.module.ts
---/app.routing.ts
--/config
--/typings
--index.html
--main.ts
--polyfills.ts
--vendor
-favicon.ico
-packages.json
-tsconfig.json
-tslint.json
-typings.json
-webapck.config.js

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "baseUrl": "./src"
  },
  "types": [
    "hammerjs",
    "jasmine",
    "node",
    "protractor",
    "selenium-webdriver",
    "source-map",
    "uglify-js",
    "webpack"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ],
  "compileOnSave": false,
  "buildOnSave": false
}

webpack.config.json:

module.exports = require('./src/config/webpack.dev.js');

helpers.js:

var path = require('path');
var _root = path.resolve(__dirname, '..');
function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [_root].concat(args));
}
exports.root = root;

webpack.common.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: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts'
    },

    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
                exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
            },
            {
                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', 'vendor', 'polyfills']
        }),

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

webpack.dev.js:

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

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

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

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

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

polyfills:

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');

if (process.env.ENV === 'production') {
    // Production
} else {
    // Development
    Error['stackTraceLimit'] = Infinity;
    require('zone.js/dist/long-stack-trace-zone');
}

main.ts:

// main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {enableProdMode} from "@angular/core";
import { AppModule } from './app/app.module';

if ( process.env.ENV === 'production' ){
    enableProdMode()
}

platformBrowserDynamic().bootstrapModule(AppModule);

score 1 · Answer 1 · answered Oct 30 '16 at 17:37

1

Basically what happening is, you have got typing installed in typings folder and same is available there in @types folder of node_modules. So one file is appearing twice. That's the reason why you're getting an duplicate identifier error. core-js of typings folder get conflicted with core-js of node_modules/typings.

You should exclude typings folder to get rid of this error

"exclude": [
  "node_modules",
  "dist",
  "typings"
],

answered Oct 30 '16 at 17:37

Pankaj Parkar

134,766
23
234
299

@Donovant the other reason would be, `core-js` might conflicting with `es6-shim` index.ts.. have you checked [this answer](http://stackoverflow.com/a/35660772/2435473) – Pankaj Parkar Oct 30 '16 at 17:43
Sorry, but I didn't get what should I do, my target is ES5 – Donovant Oct 30 '16 at 17:52
@Donovant that is what I explained in the referred answer.. I don;t want to repeat all here in this answer :( – Pankaj Parkar Oct 30 '16 at 17:53
I've added **/// ** as you said in that answer, but still doesn't work, actually I don't know if this could be the error, but I don't have any **node_modules/typings**, but **node_module/@types** – Donovant Oct 30 '16 at 18:17
Anywhere in your errors it shows es6-shim.. or what @typings folder has.. – Pankaj Parkar Oct 30 '16 at 18:18
Have you seen my **polyfills.ts** ? Anyway I can't find any **node_modules/@types/browser.d.ts** – Donovant Oct 30 '16 at 18:30
`@types` should have `core-js` & `es6-shim` folder.. correct? – Pankaj Parkar Oct 30 '16 at 18:33
"core-js": "registry:dt/core-js#0.0.0+20160725163759", "node": "registry:dt/node#6.0.0+20160831021119", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255" – Donovant Oct 30 '16 at 18:35
Please come in for chat – Pankaj Parkar Oct 30 '16 at 18:37

Does anyone now anything about this Angular2-Webpack error that I'm getting: Duplicate indentifier?

1 Answers1