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!
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.
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
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'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.
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