node_modules/@types/ 错误（接口“元素”不能同时扩展类型“ReactElement<any>）

Posted 2023-02-22

【中文标题】node_modules/@types/ 错误（接口“元素”不能同时扩展类型“ReactElement<any>）

【英文标题】：Error at node_modules/@types/ (Interface 'Element' cannot simultaneously extend types 'ReactElement<any>)

【发布时间】：2019-02-06 05:04:27

【问题描述】：

在构建步骤中，node_module 中出现多个 React.js 类型错误：

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. 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. TS2300: Duplicate identifier 'LibraryManagedAttributes'. TS2717: Subsequent property declarations must have the same type. Property 'a' must be of type 'DetailedhtmlProps&lt;AnchorHTMLAttributes&lt;HTMLAnchorElement&gt;, HTMLAnchorElement&gt;', but here has type 'DetailedHTMLProps&lt;AnchorHTMLAttributes&lt;HTMLAnchorElement&gt;, HTMLAnchorElement&gt;'.

起初我认为问题与未修复的包版本有关，所以我找到了一个使用相同包的工作项目并编辑了我的package.json 文件以使用确切的版本。 - 没有帮助。

然后我让我的同事在他的机器上做这件事，它确实奏效了！所以我调整了node、npm 和yarn 以匹配相同的版本。 - 没有帮助。

之后，我完全删除了node、npm、yarn 并重新安装了它们。 虽然它也没有解决问题。

我目前的设置是：

节点 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/**/*"
    ]

错误列表：

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>'.

【参考方案1】：

我前段时间遇到过同样的问题，与./node_modules/@types无关。使用nvm - 节点版本管理器并彻底清除node、npm、yarn 及其全局包解决了我的问题。

卸载 Node.js 和 NPM 需要花费很多 a lot of steps，这就是为什么我建议使用自动化解决方案，例如 node-reinstall script。

git clone [e-mail]:brock/node-reinstall.git
cd node-reinstall
./node-reinstall

这将删除所有包并完全删除 Node.js 和 NPM，并将其替换为 Node 版本管理器。如果安装成功，您将能够看到如下内容：

nvm --version // 0.33.11

如果您使用 Homebrew 安装 yarn，则只需执行 brew uninstall yarn，否则 yarn 已从您的系统中删除。

现在你必须照顾yarn packages。 cd 到 ~/.config/yarn/global 并删除 node_modules、package.json 和 yarn.lock。

就是这样，所有内容都已删除，您可以使用nvm 安装 Node 和 NPM。为此，请键入：

 nvm install node

它将下载、编译和安装最新版本的 Node 和 NPM。 现在检查所有内容：

node -v
npm -v