node.js - node_modules/@types/错误(接口(interface) 'Element' 不能同时扩展类型 'ReactElement)

Question

我在 node_module 中收到多个 React.js 类型错误在构建步骤中:

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

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

然后我让我的同事在他的机器上做，结果成功了!所以我调了node , npm和 yarn匹配相同的版本。 - 没有帮助。

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

我当前的设置是:

• 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/**/*"
    ]
}

错误列表:

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

Answer 1

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

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

git clone git@github.com: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