I have developed a React Application in which below mentioned modules I have used.
"babel-runtime": "^5.1.10",
"core-js": "^0.9.6",
"flux": "^2.0.1",
"fs": "0.0.2",
"griddle-react": "^0.2.13",
"humps": "0.0.1",
"invariant": "^2.0.0",
"joi": "^6.5.0",
"keymirror": "^0.1.1",
"material-ui": "^0.9.0",
"moment": "^2.10.6",
"normalizr": "^0.1.2",
"react": "^0.13.3",
"react-bootstrap": "^0.23.1",
"react-bootstrap-datetimepicker": "0.0.18",
"react-bootstrap-table": "^0.9.7",
"react-color-picker": "^2.1.6",
"react-data-components": "^0.4.0",
"react-datepicker": "^0.11.4",
"react-day-picker": "^1.0.1",
"react-dnd": "^1.1.1",
"react-document-title": "^1.0.0",
"react-flex-layout": "^0.9.2",
"react-intl": "^1.2.0",
"react-pure-render": "^1.0.1",
"react-router": "^0.13.3",
"react-select": "^0.6.3",
"react-spinner": "^0.2.1",
"react-validation-mixin": "^4.1.0",
"selectn": "^0.9.6",
"underscore": "^1.8.2",
"validator": "^3.40.1",
"webpack": "^1.11.0",
"whatwg-fetch": "^0.7.0",
"xml2js": "^0.4.12"
Now I want to upgrade React 0.13.3 to 0.14 I know facebook has already released the document but I am not clear about it if I will update the react with 0.14 then what about dependencies how new react version is applicable to dependencies modules how I can upgrade dependencies as well.please guide me.
You could run a regex over your node_modules folder package.json files after running npm update.
Since we know that ^version means "Compatible with version" the regex would be "react": "^0.14.0" to check what packages are compatible with React 0.14.0.
If you're on an Unix based OS, one (untested) way would be:
grep -ER --include="**/package.json" "\"react\": \"\^0\.14\.0\"" project_root_path/node_modules
Related
We have a component library that we build and test using Storybook (6.5.8) which pushes to chromatic and to a private NPM repository. We then import the npm package into our various projects.
This has all been working great.
Recently with a new Open SSL vulnerability coming up we did some security auditing and implemented a dependabot to make sure all our packages were updated to patch the vulnerabilities.
So we updated our configs to work with webpack 5 and everything seemed to be running smoothly with our github actions and the storybook design system was working fine. The issue now is when we import the npm package into our projects we get a blank page as it now can't seem to render anything from the npm package at all.
The console shows all the errors for the components as
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
We are getting no errors in our release action or when running the storybook design system.
Current dependencies:
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#pix4d/three-potree-loader": "^0.0.8",
"#storybook/client-api": "^6.5.8",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#tippyjs/react": "^4.2.6",
"chart.js": "^3.9.1",
"chartjs-adapter-moment": "^1.0.0",
"chartjs-plugin-zoom": "^1.2.1",
"echarts": "^5.3.3",
"echarts-for-react": "^3.0.2",
"esri-loader": "^3.6.0",
"esri-loader-hooks": "^0.4.0",
"formik": "^2.2.9",
"glob": "^8.0.3",
"lodash.orderby": "^4.6.0",
"moment": "^2.29.4",
"polished": "^4.1.1",
"prettier": "^2.6.2",
"proj4": "^2.8.0",
"react": "^17.0.1",
"react-chartjs-2": "^4.3.1",
"react-dom": "^17.0.1",
"react-inner-image-zoom": "^3.0.2",
"react-loading-skeleton": "^3.1.0",
"react-moment": "^1.1.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-select": "^5.4.0",
"react-spinners": "^0.13.4",
"sass": "^1.50.1",
"styled-components": "^5.2.1",
"tippy.js": "^6.3.7",
"web-vitals": "^1.0.1",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/cli": "^7.17.6",
"#storybook/addon-a11y": "^6.5.8",
"#storybook/addon-actions": "^6.5.8",
"#storybook/addon-essentials": "^6.5.8",
"#storybook/addon-interactions": "^6.5.8",
"#storybook/addon-links": "^6.5.8",
"#storybook/builder-webpack5": "^6.5.8",
"#storybook/client-api": "^6.5.8",
"#storybook/jest": "^0.0.10",
"#storybook/manager-webpack5": "^6.5.8",
"#storybook/node-logger": "^6.5.8",
"#storybook/preset-create-react-app": "^4.1.2",
"#storybook/react": "^6.5.8",
"#storybook/testing-library": "^0.0.11",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"auto": "^10.36.5",
"babel-plugin-styled-components": "^2.0.7",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"chromatic": "^6.5.4",
"copy-webpack-plugin": "^6.4.1",
"cross-env": "^7.0.3",
"html-webpack-plugin": "^4.5.2",
"lodash.orderby": "^4.6.0",
"npm-prepare-dist": "^0.3.0",
"polished": "^4.1.1",
"prettier": "^2.6.2",
"react-scripts": "5.0.1",
"sass-loader": "^9.0.2",
"styled-components": "^5.2.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "5",
"webpack-babel-env-deps": "1.5.0",
"webpack-cli": "^4.10.0"
},
Rolled back repository to pre webpack updates and it all worked perfectly. Tried to do updates step by step but as soon as we move to webpack 5 it all breaks. We need to have the updated packages, so we aren't exposed to vulnerabilities, but I also need this to work obviously.
If anyone comes across this, it turns out the issue was with the uglifyjs-webpack-plugin. It is not compatible with webpack5.
So I need to integrate android 12 support in my application but little confused if the react native 0.61 support the API level 31 (android 12) support.
I have looked into multiple sources but didn't got any answer for this it seems nobody is getting the same issue means there is a solution.
"dependencies": {
"#babel/runtime": "^7.1.2",
"#mapbox/mapbox-sdk": "^0.4.1",
"#mapbox/react-native-mapbox-gl": "https://github.com/nitaliano/react-native-mapbox-gl/tarball/master",
"#react-native-community/async-storage": "^1.6.1",
"#react-native-community/blur": "^3.6.0",
"#react-native-community/cameraroll": "^1.4.0",
"#react-native-community/cli-platform-android": "^3.0.3",
"#react-native-community/datetimepicker": "^3.0.9",
"#react-native-community/google-signin": "^3.0.4",
"#react-native-community/netinfo": "^4.2.2",
"#react-native-community/push-notification-ios": "^1.4.1",
"#react-native-firebase/app": "^8.4.3",
"#react-native-firebase/messaging": "^7.8.4",
"#turf/bbox": "^6.0.1",
"#turf/bbox-polygon": "^6.0.1",
"#turf/bearing": "^6.0.1",
"#turf/circle": "^6.0.1",
"#turf/distance": "^6.0.1",
"#turf/helpers": "^6.1.4",
"#turf/transform-rotate": "^5.1.5",
"axios": "^0.18.0",
"native-base": "^2.11.0",
"react": "16.9.0",
"react-native": "0.61.0",
"react-native-animatable": "^1.3.0",
"react-native-background-fetch": "^3.1.0",
"react-native-background-geolocation": "^3.9.3",
"react-native-background-timer": "^2.4.1",
"react-native-contacts": "^7.0.0",
"react-native-device-info": "^3.1.4",
"react-native-drag-sort": "^2.0.3",
"react-native-draggable-flatlist": "^1.1.7",
"react-native-fbsdk": "^1.1.1",
"react-native-fit-image": "1.5.5",
"react-native-floating-action": "^1.14.2",
"react-native-geolocation-service": "^3.1.0",
"react-native-image-crop-picker": "^0.26.1",
"react-native-image-viewing": "^0.2.2",
"react-native-linear-gradient": "^2.5.6",
"react-native-loading-spinner-overlay": "^1.0.1",
"react-native-md5": "^1.0.0",
...
> package.json file for the libraries I am using.
> any solution or questions will be appreciated.
No react-native 0.61 will not support Android 12 because of the default gradle configuration. Which you can change, but its better if you just upgrade. So go ahead and upgrade to <=0.66
I want to import table container for my react application. but I can't use it because of my material ui version error.
How i update my version to latest version. I suppose that it's the solution for that error.
I have already tried npm uninstall and npm uninstall, but didn't solve yet. Help me.
{
"name": "material-dashboard-react",
"version": "1.6.0",
"description": "Material Dashboard React. Coded by Creative Tim",
"private": false,
"main": "dist/index.js",
"dependencies": {
"#khanacademy/react-multi-select": "^0.3.3",
"#lls/react-light-calendar": "^2.0.7",
"#material-ui/core": "^3.9.4",
"#material-ui/icons": "3.0.2",
"#progress/kendo-react-dropdowns": "^3.4.1",
"#progress/kendo-react-intl": "^3.4.1",
"animate.css": "^3.7.2",
"axios": "^0.19.1",
"bootstrap": "^4.3.1",
"chartist": "0.10.1",
"classnames": "2.2.6",
"firebase": "^7.0.0",
"history": "4.7.2",
"jquery": "^1.9.1",
"material-ui-next-responsive-table": "^0.5.1",
"multi-select-react": "^0.1.8",
"multiselect-dropdown-react": "^1.0.5",
"multiselect-react-dropdown": "^1.2.4",
"perfect-scrollbar": "1.4.0",
"prettier": "1.16.4",
"prop-types": "15.7.1",
"react": "^16.8.1",
"react-bootstrap": "^1.0.0-beta.12",
"react-bootstrap-dialog": "^0.13.0",
"react-bootstrap-modal": "^4.2.0",
"react-chartist": "0.13.3",
"react-confirm-alert": "^2.4.1",
"react-datepicker": "^2.9.6",
"react-devtools": "^4.4.0",
"react-dialog": "^1.0.2",
"react-dom": "16.8.1",
"react-dropdown": "^1.6.4",
"react-dropdown-multiselect": "^1.0.0",
"react-dropdown-tree-select": "^2.1.1",
"react-google-maps": "9.4.5",
"react-light-calendar": "^1.0.3",
"react-multiple-select-dropdown": "^2.0.0",
"react-multiselect-checkboxes": "^0.1.1",
"react-notification-alert": "0.0.12",
"react-notifications": "^1.4.3",
"react-notifications-component": "^2.1.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"react-select": "^3.0.8",
"react-swipeable-views": "0.13.1",
"react-table-container": "^2.0.3",
"react-toastify": "^5.4.0",
#material-ui/core version ^3.9.4 doesn't have <TableContainer>
so you need to update #materia-ui/core version
latest version v4.9.2, so please update version and try
1) Go to package.json file in your project root.
2) Locate #material-ui/core in dependencies. Currently, you will see it as "#material-ui/core": "^3.9.4".
3) Now edit the version number. For example, "#material-ui/core": "^4.9.2".
4) Run npm install.
That's it!
You can follow this procedure for any dependency when you want to change the version. But make sure that those versions are compatible with each other dependencies (if any).
Good luck!
since a couple of days I have a problem, where CRA does not inject SCSS changes anymore.
If I refresh the page manually, the SCSS code change is there and applied to my page.
If I change my JavaScript, the change is detected and the app hot reloads.
I was on the 3.0 version of react-scripts, and now I upgraded to the latest, 3.2.0.
Still, SCSS is not injected.
In case it's useful, here are the packages in my package.json file:
"dependencies": {
"#aspnet/signalr": "^1.1.4",
"#reach/router": "^1.2.1",
"axios": "^0.18.0",
"bcryptjs": "^2.4.3",
"css-vars-ponyfill": "^2.1.1",
"dayjs": "^1.8.14",
"dompurify": "^1.0.10",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.4",
"google-maps-react": "^2.0.2",
"html-to-draftjs": "^1.4.0",
"i18next": "^15.1.0",
"i18next-browser-languagedetector": "^3.0.1",
"i18next-xhr-backend": "^2.0.1",
"interweave": "^11.1.0",
"node-sass": "^4.13.0",
"prop-types": "^15.7.2",
"pubnub": "^4.25.2",
"react": "^16.8.6",
"react-anchor-link-smooth-scroll": "^1.0.12",
"react-app-polyfill": "^1.0.1",
"react-dom": "^16.8.6",
"react-draft-wysiwyg": "^1.13.2",
"react-dropzone": "^10.1.5",
"react-ga": "^2.5.7",
"react-google-maps": "^9.4.5",
"react-i18next": "^10.9.0",
"react-image-crop": "^8.2.0",
"react-modal": "^3.8.1",
"react-redux": "^7.0.3",
"react-scripts": "3.2.0",
"react-scroll-up": "^1.3.3",
"react-tooltip": "^3.10.0",
"react-twitter-embed": "^2.0.8",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"uniqid": "^5.0.3"
},
}
Does anybody have any idea what might have caused it, or what I might try in order to troubleshoot the issue?
edit: I have noticed that when I save a scss file, a hot-update.js file is added to the DOM. this file contains my css changes, but they do not take effect.
so the issue seemed to be related to the fact that i was injecting some code in the head of the document (for the favicons) just before the app was loaded, following a fetch on a server containing the favicon urls.
Removing this fixed the HMR. Thanks for your help
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)