Webpack Error in terminal when starting Reactjs App - reactjs

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?

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!

Related

Blank React website on first load on Iphone - undefined t.cssRules

Just found out ugly bug on IPhone (chrome/safari) on first website load. Run via Browserstack and it logs this error to console:
TypeError: undefined is not an object (evaluating 't.cssRules'
Tried on multiple Iphones on Browserstack, and also on real Iphone devices, and the same error pops out (confirmed with chrome://inspect).
According to image posted above, it is related to react.dom.production.min.js.
Anyone had such issue? Really tried to find solution but nothing worked.
Here are installed packages:
"dependencies": {
"#emailjs/browser": "^3.10.0",
"#hookform/resolvers": "^2.9.10",
"#react-hook/resize-observer": "^1.2.6",
"animate.css": "^4.1.1",
"classnames": "^2.3.2",
"framer-motion": "^7.6.15",
"react": "^18.2.0",
"react-alice-carousel": "^2.6.4",
"react-background-video-player": "^1.1.8",
"react-burger-menu": "^3.0.8",
"react-cookie-consent": "^8.0.1",
"react-dom": "^18.2.0",
"react-external-link": "^2.0.0",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.40.0",
"react-intersection-observer": "^9.4.1",
"react-router-dom": "^6.3.0",
"react-router-sitemap": "^1.2.0",
"react-scripts": "5.0.1",
"react-scroll": "^1.8.7",
"react-slick": "^0.29.0",
"rfs": "^9.0.6",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.6",
"use-font-face-observer": "^1.2.1",
"yup": "^0.32.11"
},
"devDependencies": {
"#types/react": "^18.0.21",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.0.0",
"#typescript-eslint/parser": "^5.0.0",
"env-cmd": "^10.1.0",
"eslint": "^8.1.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"node-sass-chokidar": "^2.0.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1",
"typescript": "3.8.3"
},

React TypeError: Cannot read property 'forEach' of undefined in Production

We have a Node back-end en react front-end application hosted on Heroku.
On the Heroku Server we get some pages with the error message. React works fine on the localhost.
We tried a different "react scripts": "3.1.2" and "react scripts": "3.2.0." we were on version 3.0.1.
The error=
Error message
Our react package.json file.
"dependencies": {
"#material-ui/core": "^3.9.2",
"#material-ui/icons": "^3.0.2",
"#material-ui/styles": "^4.4.1",
"#types/googlemaps": "3.30.16",
"#types/markerclustererplus": "2.1.33",
"ajv": "6.9.1",
"animate.css": "3.7.0",
"axios": "^0.18.1",
"classnames": "2.2.6",
"history": "4.7.2",
"http-proxy-middleware": "^0.19.0",
"moment": "2.24.0",
"node-sass": "^4.11.0",
"nouislider": "13.1.0",
"prop-types": "15.7.1",
"react": "16.8.1",
"react-animate-on-scroll": "2.1.5",
"react-datetime": "2.16.3",
"react-dom": "16.8.1",
"react-ga": "^2.5.7",
"react-google-maps": "9.4.5",
"react-helmet": "^5.2.1",
"react-image-gallery": "0.8.12",
"react-redux": "^6.0.0",
"react-router-dom": "4.3.1",
"react-scripts": "3.1.2",
"react-slick": "0.23.2",
"react-swipeable-views": "0.13.1",
"react-table": "^6.9.2",
"react-tagsinput": "3.19.0",
"redux": "^4.0.1",
"redux-form": "^8.1.0",
"redux-thunk": "^2.3.0",
"typescript": "^3.5.3"
Error solved. The problem was with the "react-table": "^6.9.2", see:
https://github.com/tannerlinsley/react-table/issues/1686

IconComponent: PropTypes.elementType.isRequired ( material ui ) error

I've tried to migrate material ui from v3 to v4 , but have got this issue
I thought that this issue related to prop IconComponent for Select component , but after adding it to each #material-ui/core/Select component in my project it didn't help .
Also I've found this changes in material ui github repository https://github.com/mui-org/material-ui/pull/17390/files maybe it will help
Also you can find below all my dependencies:
"dependencies": {
"#babel/runtime": "^7.6.2",
"#date-io/date-fns": "0.0.2",
"#material-ui/core": "4.4.3",
"#material-ui/icons": "3.0.1",
"#material-ui/pickers": "3.2.6",
"#material-ui/styles": "^4.4.3",
"axios": "0.19.0",
"classnames": "2.2.6",
"compression-webpack-plugin": "3.0.0",
"connected-react-router": "6.4.0",
"date-fns": "2.0.0-alpha.27",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.14.0",
"history": "4.6.3",
"humps": "2.0.0",
"jss": "^10.0.0",
"jss-camel-case": "6.1.0",
"jss-default-unit": "8.0.2",
"jss-expand": "5.3.0",
"jss-extend": "6.2.0",
"jss-global": "3.0.0",
"jss-nested": "6.0.1",
"jss-props-sort": "6.0.0",
"jss-vendor-prefixer": "8.0.1",
"lodash": "4.17.14",
"moment": "2.23.0",
"normalizr": "3.3.0",
"prop-types": "15.6.2",
"qs": "6.5.2",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-dropzone": "10.1.4",
"react-hot-loader": "4.8.8",
"react-image": "2.1.1",
"react-intl": "2.7.2",
"react-intl-po": "2.2.2",
"react-intl-redux": "2.0.2",
"react-motion": "0.5.2",
"react-pose": "4.0.8",
"react-redux": "7.0.3",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"react-spinners": "0.4.7",
"react-universal-component": "4.0.0",
"recompose": "0.30.0",
"redux": "4.0.1",
"redux-axios-middleware": "4.0.0",
"redux-devtools-extension": "2.13.8",
"redux-form": "8.2.2",
"redux-form-validators": "^3.2.2",
"redux-immutable-state-invariant": "2.1.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"store2": "2.7.1",
"uglifyjs-webpack-plugin": "2.0.1"
},
elementType was added in prop-types 15.7.0, and you are using 15.6.2
Upgrade your prop-types to version 15.7.0 or higher and the error should disappear.

npm start failed _this.compiler.applyPluginsAsync is not a function

please help me to understand what is the problem
when I start npm start I have a error
_this.compiler.applyPluginsAsync is not a function
npm version is 6.4.1
node version is v 10.13.0
my package.json file
"devDependencies": {
"#types/enzyme": "^3.1.15",
"#types/enzyme-adapter-react-16": "^1.0.3",
"#types/jest": "^23.3.9",
"#types/node": "^10.12.9",
"#types/react": "^16.7.6",
"#types/react-dom": "^16.0.9",
"#types/react-intl": "^2.3.12",
"#types/react-redux": "^6.0.9",
"#types/react-router": "^4.4.1",
"#types/react-router-dom": "^4.3.1",
"#types/react-select": "^2.0.7",
"#types/react-table": "^6.7.16",
"#types/reactstrap": "^6.4.2",
"#types/redux": "^3.6.0",
"autoprefixer": "7.1.6",
"babel-jest": "^22.1.0",
"babel-loader": "^7.1.2",
"babel-preset-react-app": "^3.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "0.11.2",
"fork-ts-checker-webpack-plugin": "^0.2.10",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"json-server": "^0.14.0",
"node-sass": "^4.9.3",
"postcss-loader": "2.0.8",
"react-dev-utils": "^5.0.3",
"react-dropzone": "^5.1.1",
"redux-devtools-extension": "^2.13.5",
"resolve": "1.6.0",
"sass-loader": "^7.1.0",
"source-map-loader": "^0.2.4",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"ts-jest": "22.0.1",
"ts-loader": "^2.3.7",
"tsconfig-paths-webpack-plugin": "^2.0.0",
"tslint": "^5.7.0",
"tslint-config-prettier": "^1.16.0",
"tslint-react": "^3.2.0",
"typescript": "^3.1.6",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "0.6.2",
"webpack": "^4.26.0",
"webpack-dev-server": "^3.1.10",
"webpack-manifest-plugin": "1.3.2"
}
According to the official repo of fork-ts-checker-webpack-plugin, this was reported in this issue and fixed in version 0.6.1. Update that package and try again to see if it happens.

.Net Core 2.0 react redux template update webpack

I created my app with dotnet new reactredux (2.0) some time ago, it uses webpack 2.5.3, I'm really keeen to update to more up to date version, however there are plenty of dependecies that don't support newer versions. Is there anybody who successfully did that?
dependecies that bother me a most:
aspnet-webpack
aspnet-webpack-react
seems discountinued
there my full project dependencies:
"devDependencies": {
"#types/history": "4.6.0",
"#types/jest": "^22.1.3",
"#types/react": "^16.3.13",
"#types/react-dom": "^16.0.4",
"#types/react-hot-loader": "3.0.3",
"#types/react-redux": "4.4.45",
"#types/react-router": "^4.0.23",
"#types/react-router-dom": "^4.2.5",
"#types/react-router-redux": "5.0.3",
"#types/webpack": "2.2.15",
"#types/webpack-env": "1.13.0",
"#types/fetch-mock": "^6.0.0",
"#types/enzyme": "^3.1.10",
"#types/enzyme-adapter-react-16": "^1.0.2",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"css-loader": "0.28.4",
"domain-task": "^3.0.3",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"foundation-sites": "^6.4.4-rc1",
"history": "4.6.3",
"jest": "22.4.2",
"jest-cli": "22.4.2",
"fetch-mock": "^6.0.1",
"jquery": "3.2.1",
"node-noop": "1.0.0",
"node-sass": "^4.7.2",
"react": "^16.3.2",
"react-dom": "^16.2.0",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.5",
"react-router-dom": "4.2.2",
"react-router-redux": "5.0.0-alpha.6",
"redux": "3.7.1",
"redux-thunk": "2.2.0",
"sass-loader": "^6.0.6",
"style-loader": "0.18.2",
"ts-jest": "22.0.4",
"ts-nameof": "^0.10.3",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"circular-dependency-plugin": "^4.4.0"

Resources