CODEWITHSUNDEEP
reactjstypescriptwebpackwebpack-dev-serverpackage.json
Sarath Sasi
Sarath Sasi

Reputation: 155

Webpack Error in terminal when starting Reactjs App

I am getting following errors in node terminal when I try to start my 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'.

my package.json contains

"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"
  }

I am not getting any issues when running app in my local. But still the terminal contains this log. Also it prevents to push the code to repo since validation gets failed in webpack scripts. I tried to install latest version and unable to get rid of this.

Can someone please help?

Upvotes: 0

Views: 524

Answers (1)

mairf
mairf

Reputation: 61

The version of @types/webpack in your package.json (v4.46.2) is incompatible with the version of Typescript you are running.

Try running npm view @types/webpack. In the output you can find a list of tags named for Typescript versions, e.g. ts3.9, ts3.8, etc. Each tag is associated with the latest version of @types/webpack that is compatible with that version of Typescript.

Good luck!

Upvotes: 1

Related Questions