首页 > 解决方案 > 启动 Reactjs App 时终端中的 Webpack 错误

问题描述

当我尝试启动我的 react-app 时,节点终端出现以下错误

[at-loader] ./node_modules/@types/webpack/index.d.ts:23:16
    TS2665: Invalid module name in augmentation. Module 'webpack/lib/dependencies/HarmonyExportSpecifierDependency' resolves to an untyped module at 'C:/Work/walmart/gravity/Finance-AI-App/node_modules/webpack/lib/dependencies/HarmonyExportSpecifierDependency.js', which cannot be augmented.

[at-loader] ./node_modules/@types/webpack/index.d.ts:24:12
    TS2693: 'any' only refers to a type, but is being used as a value here.

[at-loader] ./node_modules/@types/webpack/index.d.ts:701:51
    TS1093: Type annotation cannot appear on a constructor declaration.

[at-loader] ./node_modules/@types/webpack/index.d.ts:701:51
    TS2526: A 'this' type is available only in a non-static member of a class or interface.

[at-loader] ./node_modules/@types/webpack/index.d.ts:2050:44
    TS2694: Namespace 'webpack.compilation' has no exported member 'Module'.

我的 package.json 包含

"devDependencies": {
    "@babel/cli": "7.0.0",
    "@babel/core": "7.0.0",
    "@babel/preset-env": "7.0.0",
    "@babel/preset-react": "7.0.0",
    "@types/d3": "^5.0.0",
    "@types/d3-sankey": "^0.11.0",
    "@types/jest": "23.3.1",
    "@types/lodash": "4.14.116",
    "@types/node": "10.7.1",
    "@types/react": "16.7.7",
    "@types/react-dom": "16.0.10",
    "@types/react-redux": "6.0.7",
    "@types/react-router": "4.0.30",
    "@types/react-router-dom": "4.3.0",
    "awesome-typescript-loader": "5.2.1",
    "babel-loader": "8.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "1.0.0",
    "dotenv": "6.2.0",
    "express": "4.16.3",
    "file-loader": "2.0.0",
    "html-webpack-plugin": "3.2.0",
    "husky": "1.1.2",
    "ignore-loader": "0.1.2",
    "image-webpack-loader": "^4.4.0",
    "jest": "23.5.0",
    "node-sass": "4.9.3",
    "prettier": "1.15.3",
    "react-addons-test-utils": "15.6.2",
    "react-hot-loader": "4.3.4",
    "reactotron-react-js": "2.1.1",
    "reactotron-redux": "2.1.0",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.0",
    "stylelint": "9.5.0",
    "stylelint-config-recommended-scss": "3.2.0",
    "stylelint-config-standard": "18.2.0",
    "stylelint-webpack-plugin": "0.10.5",
    "tslint": "5.11.0",
    "tslint-config-prettier": "1.15.0",
    "typescript": "3.1.0-rc.20180911",
    "uglifyjs-webpack-plugin": "1.3.0",
    "webpack": "4.17.1",
    "webpack-cli": "3.1.0",
    "webpack-dev-middleware": "3.1.3",
    "webpack-dev-server": "3.1.5",
    "webpack-merge": "4.1.4"
  },
  "dependencies": {
    "@material/elevation": "0.40.1",
    "@types/webpack": "^4.46.2",
    "@vx/axis": "0.0.176",
    "@vx/curve": "0.0.165",
    "@vx/event": "0.0.165",
    "@vx/glyph": "0.0.170",
    "@vx/gradient": "0.0.165",
    "@vx/grid": "0.0.179",
    "@vx/group": "0.0.170",
    "@vx/responsive": "0.0.179",
    "@vx/scale": "0.0.165",
    "@vx/shape": "0.0.176",
    "@vx/text": "0.0.175",
    "@vx/tooltip": "0.0.165",
    "anychart": "^8.6.0",
    "anychart-react": "^1.4.1",
    "axios": "^0.18.0",
    "babel-preset-minify": "0.5.0",
    "bootstrap": "^4.3.1",
    "compression": "1.7.3",
    "connected-react-router": "4.4.1",
    "d3": "^5.9.2",
    "d3-plugins-sankey": "^1.2.1",
    "d3-sankey": "^0.12.3",
    "dayjs": "1.7.7",
    "file-saver": "^2.0.1",
    "graphql-request": "1.8.2",
    "helmet": "3.15.0",
    "history": "4.7.2",
    "jquery": "^3.4.1",
    "localforage": "1.7.3",
    "lodash": "4.17.10",
    "mdi-react": "4.4.0",
    "mocker-data-generator": "2.6.6",
    "number-abbreviate": "2.0.0",
    "popper.js": "^1.14.3",
    "prop-types": "^15.7.2",
    "react": "16.7.0-alpha.2",
    "react-dom": "16.7.0-alpha.2",
    "react-faux-dom": "^4.5.0",
    "react-redux": "5.0.7",
    "react-redux-loading-bar": "^4.2.0",
    "react-redux-spinner": "^2.0.0",
    "react-router": "4.3.1",
    "react-router-dom": "4.3.1",
    "redux": "4.0.0",
    "redux-persist": "5.10.0",
    "redux-thunk": "2.3.0",
    "request-promise": "4.2.2",
    "reselect": "4.0.0",
    "stylelint-scss": "3.1.3",
    "tslint-react": "3.6.0",
    "url-loader": "^2.1.0",
    "uuid": "3.3.2",
    "xlsx": "^0.14.3"
  }

在本地运行应用程序时,我没有遇到任何问题。但是终端仍然包含此日志。它还可以防止将代码推送到 repo,因为 webpack 脚本中的验证失败。我试图安装最新版本,但无法摆脱它。

有人可以帮忙吗?

标签: reactjstypescriptwebpackwebpack-dev-serverpackage.json

解决方案


您的 package.json (v4.46.2) 中的版本@types/webpack与您正在运行的 Typescript 版本不兼容。

尝试运行npm view @types/webpack。在输出中,您可以找到以 Typescript 版本命名的标签列表,例如 ts3.9、ts3.8 等。每个标签都与@types/webpack与该版本的 Typescript 兼容的最新版本相关联。

祝你好运!


推荐阅读