Typescript loader throws multiple 'Duplicate identifier ..' error when compiling

Question

I moved a project from my workstation to my home pc today and now I can't compile it anymore.

Whenever I'm running 'webpack', I'm getting the following errors:

TS2300: Duplicate identifier 'Request'.

ERROR in [at-loader] C:\Users\Rat King Cole\AppData\Roaming\npm\node_modules\typescript\lib\lib.dom.d.ts:9360:13
    TS2300: Duplicate identifier 'Request'.

ERROR in [at-loader] C:\Users\Rat King Cole\AppData\Roaming\npm\node_modules\typescript\lib\lib.dom.d.ts:9365:11
    TS2300: Duplicate identifier 'Response'.

ERROR in [at-loader] C:\Users\Rat King Cole\AppData\Roaming\npm\node_modules\typescript\lib\lib.dom.d.ts:9376:13
    TS2300: Duplicate identifier 'Response'.

ERROR in [at-loader] C:\Users\Rat King Cole\AppData\Roaming\npm\node_modules\typescript\lib\lib.dom.d.ts:14893:18
    TS2451: Cannot redeclare block-scoped variable 'fetch'.

ERROR in [at-loader] C:\Users\Rat King Cole\AppData\Roaming\npm\node_modules\typescript\lib\lib.dom.d.ts:14898:6
    TS2300: Duplicate identifier 'BodyInit'.

ERROR in [at-loader] C:\Users\Rat King Cole\AppData\Roaming\npm\node_modules\typescript\lib\lib.dom.d.ts:14919:6
    TS2300: Duplicate identifier 'HeadersInit'.

ERROR in [at-loader] C:\Users\Rat King Cole\AppData\Roaming\npm\node_modules\typescript\lib\lib.dom.d.ts:14929:6
    TS2300: Duplicate identifier 'RequestInfo'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:11:13
    TS2451: Cannot redeclare block-scoped variable 'fetch'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:13:14
    TS2300: Duplicate identifier 'HeadersInit'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:14:15
    TS2300: Duplicate identifier 'Headers'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:31:14
    TS2300: Duplicate identifier 'BodyInit'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:43:14
    TS2300: Duplicate identifier 'RequestInfo'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:44:15
    TS2300: Duplicate identifier 'Request'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:64:11
    TS2300: Duplicate identifier 'Request'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:70:5
    TS2403: Subsequent variable declarations must have the same type.  Variable 'referrerPolicy' must be of type 'string', but here has type 'ReferrerPolicy'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:71:5
    TS2403: Subsequent variable declarations must have the same type.  Variable 'mode' must be of type 'string', but here has type 'RequestMode'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:72:5
    TS2403: Subsequent variable declarations must have the same type.  Variable 'credentials' must be of type 'string', but here has type 'RequestCredentials'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:73:5
    TS2403: Subsequent variable declarations must have the same type.  Variable 'cache' must be of type 'string', but here has type 'RequestCache'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:74:5
    TS2403: Subsequent variable declarations must have the same type.  Variable 'redirect' must be of type 'string', but here has type 'RequestRedirect'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:76:5
    TS2403: Subsequent variable declarations must have the same type.  Variable 'window' must be of type 'any', but here has type 'null'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:88:15
    TS2300: Duplicate identifier 'Response'.

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:107:11
    TS2300: Duplicate identifier 'Response'.

ERROR in [at-loader] node_modules\@types\whatwg-streams\index.d.ts:32:15
    TS2300: Duplicate identifier 'ReadableStream'.

I've removed and re-installed all node_modules (and types), tried installing Typescript locally and globally and switched from ts-loader to awesome-typescript-loader (which at least solved some other errors I had).

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "app",
        "moduleResolution": "node",
        "module": "commonjs",
        "target": "es6",
        "jsx": "preserve",
        "noImplicitAny": false,
        "sourceMap": true,
        "lib": [
            "es6",
            "dom"
        ],
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true
    },
    "exclude": [
        "node_modules"
    ]
}

webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CheckerPlugin } = require('awesome-typescript-loader')
var TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;

module.exports = {
    entry: {
        'vendor': [
            'react',
            'react-dom',
            'react-router',
            'react-bootstrap',
            'react-router-bootstrap',
            'react-datetime'
        ],
        'client': [
            'webpack-dev-server/client?http://0.0.0.0:8080', // WebpackDevServer host and port
            'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
            './app/boot-client.tsx'
        ],
    },
    output: {
        filename: '[name].bundle.js',
        path: './app/',
    },
    resolve: {
        plugins: [
            new TsConfigPathsPlugin('./tsconfig.json')
        ],
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss']
    },
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                include: /app/,
                loaders: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.tsx?$/,
                include: /app/,
                loaders: 'awesome-typescript-loader'
            },
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor'),
        new HtmlWebpackPlugin({
            inject: 'body',
            template: 'app/index_template.html',
            filename: 'index.html'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new CheckerPlugin()
    ],
    devServer: {
        contentBase: "./app",
        port: 8080
    },
};

Unfortunately I'm not very experienced in this area, so what am I missing here?

Answer 1

ERROR in [at-loader] node_modules\@types\whatwg-fetch\index.d.ts:11:13

TypeScript latest ships with fetch definitions out of the box. So uninstall whatwg-fetch definitions:

npm uninstall @types/whatwg-fetch