Search code examples
node.jsreactjstypescriptnpmyarnpkg

Error at node_modules/@types/ (Interface 'Element' cannot simultaneously extend types 'ReactElement<any>)

I get multiple React.js type errors in node_module's during the build step:

  1. TS2320: Interface 'Element' cannot simultaneously extend types 'ReactElement<any>' and 'ReactElement<any>'. Named property 'type' of types 'ReactElement<any>' and 'ReactElement<any>' are not identical.
  2. S2320: Interface 'ElementClass' cannot simultaneously extend types 'Component<any, {}, any>' and 'Component<any, {}, any>'. Named property 'props' of types 'Component<any, {}, any>' and 'Component<any, {}, any>' are not identical.
  3. TS2300: Duplicate identifier 'LibraryManagedAttributes'.
  4. TS2717: Subsequent property declarations must have the same type. Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.

At first I was thinking that the problem was related to unfixed package versions, so I found a working project using the same packages and edited my package.json file to use the exact version. - Didn't help.

Then I asked my co-worker to do it on his machine and it did work! So I tuned node, npm and yarn to match the same versions. - Didn't help.

After that I completely removed node, npm, yarn and re-installed them. Though it didn't fix the problem as well.

My current setup is:

  • node v10.9.0
  • npm v6.2.0
  • yarn v1.9.4

package.json:

  "devDependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/plugin-transform-typescript": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "@babel/preset-react": "^7.0.0-rc.1",
    "@commitlint/cli": "^7.0.0",
    "@commitlint/config-conventional": "^7.0.1",
    "@types/react": "^16.4.12",
    "@types/react-dom": "^16.0.7",
    "@types/react-router-dom": "^4.3.0",
    "awesome-typescript-loader": "^5.2.0",
    "babel-loader": "^8.0.0-beta",
    "commitizen": "^2.10.1",
    "commitlint": "^7.0.0",
    "css-loader": "^1.0.0",
    "cz-customizable": "^5.2.0",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^0.14.3",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "source-map-loader": "^0.2.4",
    "standard-version": "^4.4.0",
    "style-loader": "^0.22.1",
    "typescript": "^3.0.1",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "dependencies": {
    "@material-ui/core": "^1.5.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-router-dom": "^4.3.1"
  }

tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "esnext",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

List of errors:

ERROR in [at-loader] ./node_modules/@types/react/index.d.ts:2305:19
    TS2320: Interface 'Element' cannot simultaneously extend types 'ReactElement<any>' and 'ReactElement<any>'.
  Named property 'type' of types 'ReactElement<any>' and 'ReactElement<any>' are not identical.

ERROR in [at-loader] ./node_modules/@types/react/index.d.ts:2306:19
    TS2320: Interface 'ElementClass' cannot simultaneously extend types 'Component<any, {}, any>' and 'Component<any, {}, any>'.
  Named property 'props' of types 'Component<any, {}, any>' and 'Component<any, {}, any>' are not identical.

ERROR in [at-loader] ./node_modules/@types/react/index.d.ts:2312:14
    TS2300: Duplicate identifier 'LibraryManagedAttributes'.

ERROR in [at-loader] ../../../node_modules/@types/react/index.d.ts:2326:13
    TS2717: Subsequent property declarations must have the same type.  Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
Solution

  • I had the same problem a while ago and it has nothing to do with ./node_modules/@types. Using nvm - node version manager and complete wipeout of node, npm, yarn and their global packages fixed my issue.

    Uninstalling Node.js and NPM takes quite a lot of steps, that's why I recommend using an automated solution such as node-reinstall script. 

    git clone [email protected]:brock/node-reinstall.git
cd node-reinstall
./node-reinstall

    This deletes all packages and completely removes Node.js and NPM and replaces it with the Node Version Manager. If the installation was successful you'll be able to see something like this:

    nvm --version // 0.33.11

    If you used Homebrew to install yarn, then simply do brew uninstall yarn, otherwise yarn is already removed from your system.

    Now you will have to take care of yarn packages. cd to ~/.config/yarn/global and remove node_modules, package.json and yarn.lock.

    That's it, everything is removed and you are ready to install Node and NPM with nvm. To do so type:

     nvm install node

    It will download, compile, and install the latest release of Node and NPM.
    Now check everything with:

    node -v
npm -v