Karma-typescript Interface XXX cannot simultaneously extend types ' YYY

Question

My tsconfig.json is

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "preserveConstEnums": true,
    "removeComments": true,
    "noImplicitAny": false,
    "moduleResolution": "node",
    "noUnusedParameters": true
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "node_modules",
    "@typings",
    "typings/main",
    "typings/main.d.ts",
    "typings/index.d.ts"
  ],
  "paths": {
    "react": ["node_modules/@types/react"]
  }
}

And I have added the karma-typescript to my config

settings.frameworks.push('karma-typescript');
settings.preprocessors['test-bundler.js'].unshift('karma-typescript');
settings.karmaTypescriptConfig = {
    tsconfig: './tsconfig.json',
};

Using webpack, the dev-server and compiling works fine.

And here is a dummy test

describe('Root', () => {
    it('should pass', () => {
        console.log('done');
    });
});

When running the test, I get

node_modules/@types/react/index.d.ts(2736,19): error TS2320: Interface 'ElementClass' cannot simultaneously extend types 'Component' and 'Component'. Named property 'props' of types 'Component' and 'Component' are not identical.

And similar to those. If I remove settings.preprocessors['test-bundler.js'].unshift('karma-typescript'); then the test runs fine (but then I cannot pre-compile typescript when I start to import my source files.

What is going on? My normal build and dev-server run fine with the tsconfig.json I have

Answer 1

What is going on

You have two react.d.ts in the compilation context.

Fix

Delete node_modules and any package-lock (or yarn lock) and npm install again.

If it doesn't work, find the invalid module (all modules should have react.d.ts as a peerDependency and not a hard dependency) and report it on their project.