Duplicate Identifier Error Popper.js - node.js

Question

I have been unable to fix this error or determine the cause. No code has changed, so I assume it is a result of an NPM package being updated. Here is the error log to the console. This is for an Angular2 application.
ERROR in [at-loader] ./node_modules/#types/popper.js/index.d.ts:6:19
TS2300: Duplicate identifier 'Popper'.
ERROR in [at-loader] ./node_modules/#types/popper.js/index.d.ts:89:15
TS2300: Duplicate identifier 'Popper'.
ERROR in [at-loader] ./node_modules/#types/popper.js/index.d.ts:104:3
TS2300: Duplicate identifier 'default'.
ERROR in [at-loader] ./node_modules/popper.js/index.d.ts:8:19
TS2300: Duplicate identifier 'Popper'.
ERROR in [at-loader] ./node_modules/popper.js/index.d.ts:113:15
TS2300: Duplicate identifier 'Popper'.
ERROR in [at-loader] ./node_modules/popper.js/index.d.ts:120:43
TS2694: Namespace 'Popper' has no exported member 'ReferenceObject'.
ERROR in [at-loader] ./node_modules/popper.js/index.d.ts:130:3
TS2300: Duplicate identifier 'default'.
Here is my tsconfig.json file:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"../node_modules/#types/"
]
},
"compileOnSave": true,
"exclude": [
"node_modules/*",
"**/*-aot.ts"
]
}
Here is my package.json file as you requested. I think the problem is that one of these package is upgrading to an unstable version, because I had not been receiving this error in the past:
{
"name": "truerec-verifier-landing-page",
"version": "1.0.0",
"description": "TrueRec verifier web.",
"scripts": {
"start": "webpack-dev-server --inline --progress --port 8080",
"test": "karma start karma.webpack.conf.js",
"build": "rm -rf dist/* && webpack --config config/webpack.prod.js --bail",
"dev": "rm -rf dist/* && webpack --config config/webpack.dev.js --bail"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"#angular/animations": "~4.1.1",
"#angular/common": "~4.1.1",
"#angular/compiler": "~4.1.1",
"#angular/compiler-cli": "~4.1.1",
"#angular/core": "~4.1.1",
"#angular/forms": "~4.1.1",
"#angular/http": "~4.1.1",
"#angular/platform-browser": "~4.1.1",
"#angular/platform-browser-dynamic": "~4.1.1",
"#angular/platform-server": "~4.1.1",
"#angular/router": "~4.1.1",
"#angular/tsc-wrapped": "~4.1.1",
"#angular/upgrade": "~4.1.1",
"angular-in-memory-web-api": "~0.3.1",
"angular2-recaptcha": "^0.4.1",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"js-sha3": "^0.5.7",
"ng2-pdf-viewer": "^1.1.0",
"ng2-semantic-ui": "^0.8.4",
"ng2-toastr": "^4.1.2",
"ngx-cookie": "^1.0.0",
"pdfjs-dist": "^1.8.430",
"rxjs": "5.0.1",
"zone.js": "0.8.12"
},
"devDependencies": {
"#types/google.analytics": "0.0.33",
"#types/jasmine": "2.5.36",
"#types/node": "^6.0.45",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^3.0.4",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "2.0.0-beta.5",
"file-loader": "^0.9.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.16.1",
"jasmine": "~2.4.1",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.1",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"lodash": "^4.16.2",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "2.1.13",
"protractor": "~4.0.14",
"raw-loader": "^0.5.1",
"request": "^2.81.0",
"resolve-url-loader": "^2.0.2",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.5",
"tslint": "^3.15.1",
"typescript": "~2.3.0",
"webpack": "2.2.1",
"webpack-dev-server": "2.4.1",
"webpack-merge": "^3.0.0"
},
"repository": {}
}

Answer 1

I ran into this same issue yesterday when I cloned a repo onto a new machine and did an NPM install to get the packages - same exact error. My project is also using the ng2-semantic-ui package. Ng2-semantic-ui has a dependency on both Popper.js and #types\popper (typescript definitions).
"dependencies": {
"#angular/common": "^4.1.0",
"#angular/core": "^4.1.0",
"#angular/forms": "^4.1.0",
"#types/popper.js": "^1.8.0",
"element-closest": "^2.0.2",
"popper.js": "^1.0.6",
"rxjs": "^5.0.1"
},
I was able to compare the packages of my original with the new an I noticed that popper.js now has typescript definitions included (index.d.ts). It looks like they were introduced in 1.11.1 - I have 1.10.8 on my working version and 1.12.1 on my machine with the "broken" build (same error as yours).
The source of the error and duplicate identifiers are the duplicate type definitions for popper.js.
I'm going to open up an issue over on ng2-semantic-ui and see if we can get the dependency on #types/popper.js removed as it's not needed with the latest version of popper.js. In the mean time, I removed the #types/popper.js and was able to get a good build. Hope this helps!
UPDATE: This issue looks to be resolved in a hotfix 3 weeks ago in version 0.9.4 (issue 195) (https://github.com/edcarroll/ng2-semantic-ui/releases/tag/v0.9.4). Update your dependency version in your package.json and you should be good to go.