Many Internal Server Errors - reactjs

Due to some package incompatibilities I have updated my package.json to the latest version for most of the entries, however now when I start the application it displays this long list of errors in the browser:
An error occurred while starting the application.
AggregateException: One or more errors occurred. (Dll Reference Plugin Invalid Options
options.manifest.content['./node_modules/fbjs/lib/invariant.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/fbjs/lib/warning.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/react-dom/lib/reactProdInvariant.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/object-assign/index.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/react-dom/lib/ReactDOMComponentTree.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/fbjs/lib/ExecutionEnvironment.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/jquery/dist/jquery.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/react/react.js']['meta'] is an invalid additional property
And it just goes on and on for about 500 errors. There were no compile errors when the project was built. Here is my package.json:
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/history": "^4.7.2",
"#types/react": "~16.0.2",
"#types/react-dom": "~16.0.9",
"#types/react-hot-loader": "~4.1.0",
"#types/react-router": "~4.4.0",
"#types/react-router-dom": "~4.3.1",
"#types/seamless-immutable": "^7.1.1",
"aspnet-webpack-react": "~4.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"react-hot-loader": "~4.3.12",
"react-router-dom": "~4.3.1",
"style-loader": "0.18.2",
"typescript": "~3.1.6",
"url-loader": "0.5.9",
"webpack": "4.25.1",
"webpack-hot-middleware": "2.18.2",
"#types/webpack-env": "1.13.0",
"aspnet-webpack": "3.0.0",
"webpack-dev-middleware": "3.4.0",
"#types/deep-freeze": "^0.1.1",
"#types/deep-freeze-es6": "^1.0.0",
"#types/material-ui": "^0.20.4",
"#types/react-datepicker": "~1.1.7",
"#types/react-virtualized": "~9.18.7",
"a-react-timepicker": "~2.0.0"
},
"dependencies": {
"deep-freeze-es6": "https://registry.npmjs.org/deep-freeze-es6/-/deep-freeze-es6-1.0.1.tgz",
"history": "https://registry.npmjs.org/history/-/history-4.6.3.tgz",
"react-datepicker": "~1.8.0",
"react-timekeeper": "~1.0.9",
"react-virtualized": "~9.21.0",
"seamless-immutable": "^7.1.2",
"react": "~16.6.0",
"react-dom": "~16.6.0",
"moment": "2.20.0"
}
Is anyone familiar with why this is happening? I've searched multiple posts and it seems like people always just have a couple errors. Not 500.

I don't know if you solved it or not , but I had the same problem when I updated to Webpack 4 . The solution was to to run the DllPlugin from webpack.config.vendor.js so that vendor-manifest.json would get the latest attributes.
To do this, in packages.json put this line in the scripts section
"scripts": {
"build": "webpack --config webpack.config.vendor.js",
}
and from console run npm run build

Related

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?
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!

Tried To register two Views with the same name RTCVideoView in React Native

I am trying to run my app on Android but I am getting this error I don't know why I am getting this, I don't know what is causing this error in my project
I have tried tried many ways to resolve this issue but Still wasn't able to resolve this issue.
Tried To register two Views with the same name RTCVideoView
My Package.json is
{
"name": "Hello World",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#ptomasroos/react-native-multi-slider": "^1.0.0",
"#react-native-community/async-storage": "^1.6.2",
"#react-native-community/slider": "^2.0.0",
"axios": "^0.19.0",
"connectycube-reactnative": "^1.7.3",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-autogrow-textinput": "^5.2.0",
"react-native-cache-store": "^1.0.2",
"react-native-calendars": "^1.212.0",
"react-native-deck-swiper": "^1.6.7",
"react-native-image-picker": "^1.1.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-modal-datetime-picker": "^7.5.0",
"react-native-navigation": "^3.0.0",
"react-native-scrollable-tab-view": "^0.10.0",
"react-native-swiper": "^1.5.14",
"react-native-vector-icons": "^6.6.0",
"react-native-view-overflow": "^0.0.4",
"react-native-webrtc": "^1.75.0",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"rn-prompt": "^1.0.4"
},
"devDependencies": {
"#babel/core": "^7.6.0",
"#babel/runtime": "^7.6.0",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.4.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Any Help Would be Appreciated.
All you need is just clean up the cache by the following command
npm cache clean --force
This will resolve your problem most probably
The version of react-native-webrtc you have specified in your package.json is different from the version that connectycube-reactnative depends on. The latest connectycube-reactnative (1.8.0) depends on "react-native-webrtc": "1.69.1".
Double check the dependency of the version you have installed by looking at the node_modules/connectycube-reactnative/package.json and match the version specified in your package.json to the version the connectycube-reactnative requires.
The #arzundo answer is correct
And seems this issue is addressed in latest releases here https://github.com/ConnectyCube/connectycube-reactnative-samples/tree/master/RNVideoChat so you can simply try to pull the latest master

using office-ui-fabric within dotnet core &&react application

I have a dotnet core && react application , in which I'd like to use Office-ui-fabric library .
package.json
{
"name": "app_fabric_test",
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/history": "4.6.0",
"#types/react": "15.0.35",
"#types/react-dom": "15.5.1",
"#types/react-hot-loader": "3.0.3",
"#types/react-router": "4.0.12",
"#types/react-router-dom": "4.0.5",
"#types/webpack-env": "1.13.0",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-hot-loader": "3.0.0-beta.7",
"react-router-dom": "4.1.1",
"style-loader": "0.18.2",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2"
},
"dependencies": {
"office-ui-fabric-react": "^6.37.1"
}
}
It works until I start to use the lib, I tried to import
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
So I get this result :
It seems that the page works fine in background, but it is hidden by the error message popup.
So How can I fix this problem ? otherwise how can I avoid this type of errors to be shown ?
thanks,
This problem has been fixed in new template using update asp.net core 2.1 and visual studio 15.7

Regarding Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead

I am running jest with enzyme but I am getting the above warning specifically from react-router dependency in the class I am trying to test. My question is why I am getting this warning as I have already downgraded my react version to 15.1.1.
Package.json
"dependencies": {
"axios": "^0.16.1",
"babel": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"bootstrap": "^3.3.5",
"boron": "^0.2.3",
"browserify": "^13.0.1",
"connect-history-api-fallback": "^1.2.0",
"debounce": "^1.0.0",
"envify": "^3.4.0",
"es6-promise": "^3.2.1",
"font-awesome": "^4.6.3",
"jquery": "^2.2.4",
"jwt-decode": "^2.2.0",
"minimist": "^1.2.0",
"node-fetch": "1.6.3",
"node-notifier": "^4.6.0",
"object-assign": "^4.1.0",
"react": "^15.1.0",
"react-autosuggest": "^3.8.0",
"react-dnd": "^2.1.4",
"react-dnd-html5-backend": "^2.1.2",
"react-document-title": "^2.0.3",
"react-dom": "^15.1.0",
"react-dropdown": "^1.0.4",
"react-quill": "^0.4.1",
"react-router": "^2.4.1",
"react-select": "^1.0.0-beta13",
"react-select2-wrapper": "^0.6.1",
"react-tag-input": "^3.0.3",
"reflux": "0.4.1",
"request": "^2.81.0",
"request-promise": "^4.2.0",
"toastr": "^2.1.0",
"underscore": "^1.8.3",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0",
"webpack": "^2.4.1",
"whatwg-fetch": "^1.0.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-jest": "^6.0.1",
"babel-loader": "^7.0.0",
"babelify": "^7.3.0",
"css-loader": "^0.28.0",
"del": "^2.2.0",
"enzyme": "^2.1.0",
"eslint": "^3.19.0",
"eslint-config-defaults": "^9.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-react": "^6.10.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^15.1.1",
"jest-cli": "^15.1.1",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"node-sass": "^4.5.2",
"react-addons-test-utils": "^15.1.1",
"react-bootstrap": "^0.29.5",
"regenerator-runtime": "^0.10.5",
"sass-loader": "^6.0.3",
"scss-loader": "0.0.1",
"url-loader": "^0.5.8",
"yargs": "^7.1.0"
},
The full stack trace of error is:
console.error node_modules\fbjs\lib\warning.js:36
Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning.
FAIL web\test\testClass.test.js
● Test suite failed to run
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
at CustomConsole.Object.<anonymous>.console.error (web\test\jestSetup.js:12:11)
at printWarning (node_modules\fbjs\lib\warning.js:36:17)
at warning (node_modules\fbjs\lib\warning.js:60:22)
at Object.get [as PropTypes] (node_modules\react\lib\React.js:95:49)
at Object.<anonymous> (node_modules\react-router\lib\InternalPropTypes.js:9:18)
at Object.<anonymous> (node_modules\react-router\lib\PropTypes.js:12:26)
at Object.<anonymous> (node_modules\react-router\lib\index.js:15:19)
at Object.<anonymous> (web\js\components\common\toolBar.jsx:2:20)
at Object.<anonymous> (web\test\testClass.test.js:5:16)
at process._tickCallback (internal\process\next_tick.js:103:7)
I dont want to upgrade from Router v2 to latest version 4 as I have to do lot of upgradation in my code. Why this error is coming although I am not using latest version of React where this package was moved from 'react' to 'prop-types'.
As of React 15.5.0 PropTypes is no longer apart of the react package and is now its own separate package. So if you want to get rid of the warning you'll need to npm install prop-types and then import PropTypes from 'prop-types'
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes
Same goes for TestUtils:
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#react-test-utils
If you downgraded your React node module be sure to remove your node_modules directory and reinstall them. It is most likely one of your other dependencies that upgraded too. Since you aren't pinning your versions you might end up in the same spot. I would pin your version or use yarn to generate a yarn.lock file.
React Router has updated the packages to handle the React library changes for 'createClass' and PropTypes.
Version 2
Doesn't look like they updated this one. Makes sense because version 4 is most current.
Version 3
https://github.com/ReactTraining/react-router/releases/tag/v3.0.4
(though you could likely use 3.0.5 safely)

How do I fix flow error "TouchHistoryMath. Duplicate module provider"

I'm configuring a new project and have started importing some libraries when I get the following flow error. What does this error mean and how do I diagnose and fix? This is a react native project and I recently added the subscriptions-transport-ws library.
Launching Flow server
Spawned flow server (pid=13272)
node_modules/react-native/Libraries/Renderer/src/renderers/shared/stack/event/eventPlugins/TouchHistoryMath.js:0
TouchHistoryMath. Duplicate module provider
current provider. See: node_modules/react-native-gesture-responder/library/TouchHistoryMath.js:0
package.json
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"flow": "node_modules/.bin/flow",
"flow-stop": "node_modules/.bin/flow stop"
},
"dependencies": {
"#shoutem/ui": "^0.10.9",
"apollo-client": "0.8.0",
"graphql": "^0.9.1",
"graphql-tag": "^1.2.4",
"lodash": "^4.17.4",
"react": "~15.4.0",
"react-apollo": "^0.10.1",
"react-native": "0.41.2",
"react-native-lock": "^0.4.0",
"react-redux": "^5.0.2",
"redux": "^3.6.0",
"redux-actions": "^1.2.1",
"redux-persist": "^4.4.0",
"redux-thunk": "^2.2.0",
"subscriptions-transport-ws": "^0.5.1"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "18.0.0",
"babel-preset-react-native": "1.9.1",
"eslint": "^3.15.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "6.9.0",
"flow-bin": "0.37.0",
"jest": "18.1.0",
"react-test-renderer": "~15.4.0"
},
"jest": {
"preset": "react-native"
}
I believe it is a bug caused by two modules having the same name. A workaround that solved the issue for me was to tell Flow to ignore one of the modules. In other words, add one (or both) of the following lines under the [ignore] section of your .flowconfig file:
.*/node_modules/react-native/Libraries/Renderer/src/renderers/shared/shared/event/eventPlugins/TouchHistoryMath.js
.*/node_modules/react-native-gesture-responder/library/TouchHistoryMath.js
Note: the first of these files seems to be part of the core react-native library, while the second comes from a dependency used by #shoutem/ui. I'm not sure if there's any side effects with excluding any of these files from Flow.
You should comment these lines.
# UNSUPPORTED - HASTE
#module.system=haste
#module.system.haste.use_name_reducers=true
Reference: https://github.com/facebookarchive/node-haste
Unsupported/Archived Facebook no longer uses node-haste, and this
project was not being maintained.

Resources