it's mandatory for our project to upgrade our material ui version at least initially to version 1. Our project scaled up and the current version makes us problems. Our current version is v0.20.2 It's really old as you can see haha
I follow the https://material-ui.com/guides/migration-v0x/ but the following error occurs:
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See httpsinvalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1590)
at useMemo (react.development.js:1642)
at Provider (Provider.js:10)
at mountIndeterminateComponent (react-dom.development.js:8032)
at beginWork (react-dom.development.js:8221)
at performUnitOfWork (react-dom.development.js:10224)
at workLoop (react-dom.development.js:10288)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at invokeGuardedCallback (react-dom.development.js:438)
My package.json is this:
"dependencies": {
"#material-ui/codemod": "^4.5.0",
"#material-ui/core": "^1.0.0",
"#material-ui/icons": "^4.5.1",
"#material-ui/styles": "^4.8.2",
"babel-polyfill": "~6.22.0",
"browser-filesaver": "~1.1.1",
"build-url": "~1.2.0",
"es6-promise": "~4.2.5",
"file-saver": "~2.0.1",
"iban": "~0.0.8",
"immutable": "~3.8.2",
"jsdoc": "^3.6.3",
"jsdoc-api": "~3.0.0",
"loaders.css": "~0.1.2",
"material-ui": "^0.20.2",
"moment": "~2.20.1",
"prop-types": "~15.6.0",
"react": "^16.12.0",
"react-datepicker": "~0.48.0",
"react-dom": "^16.2.1",
"react-feature-toggles": "~3.0.3",
"react-intl": "~2.4.0",
"react-loaders": "~3.0.1",
"react-redux": "^7.1.3",
"react-router": "~3.2.0",
"react-tooltip": "~3.10.0",
"redux": "~3.7.2",
"redux-form": "~8.1.0",
"redux-form-material-ui": "~4.3.3",
"redux-immutable": "~4.0.0",
"redux-persist": "~4.8.0",
"redux-persist-immutable": "~4.3.1",
"redux-saga": "~0.15.3",
"whatwg-fetch": "~2.0.1"
},
Has anyone upgrade to material ui v1 from 0.20.2 successfully? And if so which are the
exact steps you've followed?
Thanks in advance
You have different versions of react and react-dom. The react-dom version you are using (16.2.1) doesn’t support hooks. You should change it to be the same as your react version (16.12.0).
Related
I am using React Native 0.68.1 with React 18 and I got this error after upgrading:
It works fine with presentational component, but as soon as I change to a smart component with connected function from 'react-redux', it throws the above error.
my packages:
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.68.1",
"react-native-paper": "^4.12.0",
"react-native-safe-area-context": "^4.2.4",
"react-native-screens": "^3.13.1",
"react-native-vector-icons": "^9.1.0",
"react-native-web": "^0.17.7",
"react-redux": "8.0.1",
"#reduxjs/toolkit": "1.8.1",
The problem are your dependencies. React native is at this point only compatible with react 17, so you will need to downgrade react. Also, you probably should deinstall react-dom, since you are not working in the browser.
change react-redux version ==> "react-redux": "^7.2.8",
I got this error using reactstrap, bootstrap and nextjs
Server Error
SyntaxError: The requested module 'react-popper' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'react-popper';
const { Manager, Popper, Reference } = pkg;
here is my package.json file
"#apollo/react-hooks": "^3.1.5",
"#apollo/react-ssr": "^3.1.5",
"#emotion/cache": "^11.5.0",
"#emotion/react": "^11.5.0",
"#emotion/server": "^11.4.0",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#popperjs/core": "^2.10.2",
"apollo-boost": "^0.4.7",
"apollo-link-http": "^1.5.17",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"express": "^4.17.1",
"graphql": "^15.0.0",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"next": "^12.0.1",
"next-apollo": "^3.1.10",
"next-with-apollo": "^5.2.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-popper": "^2.2.5",
"reactstrap": "^9.0.0"
I checked online some article suggests I install react-popper and #popperjs/core which I did but it didn't work
I encountered the same problem today. Try to update to the latest version of Node.js. That fixed the issue for me.
To confirm that you have the latest version installed type node -v into your terminal.
I had to downgrade reactstrap to reactstrap": "^8.10.1 if I wanted it to work with node v12.18.3
I also had an issue updating to Reactstrap v9 when using Next.js and Bootstrap.
Reactstrap v9 uses Bootstrap v5.
In order to update Reactstrap to v9, I had to do the following:
update node to latest stable version in package.json file
update bootstrap to version 5 in _document file: href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css"
install latest version fo reactstrap by running: npm install reactstrap#latest
I'm attempting to upgrade my NextJS project from Material UI v4 to v5 using the official guide: https://mui.com/guides/migration-v4/
After following all the steps, when I start the server I get the following error in my console:
Module not found: Can't resolve 'react'
Import trace for requested module:
./../node_modules/#emotion/react/dist/emotion-react.browser.esm.js
./../node_modules/#mui/styled-engine/index.js
./../node_modules/#mui/system/esm/index.js
./../node_modules/#mui/core/Popper/Popper.js
./../node_modules/#mui/core/Popper/index.js
./../node_modules/#mui/core/index.js
./../node_modules/#mui/material/utils/index.js
./../node_modules/#mui/icons-material/utils/createSvgIcon.js
./../node_modules/#mui/icons-material/Menu.js
./components/global/LodAppBar.jsx
./pages/_app.jsx
I've tried deleting my node_modules folder and installing all modules fresh with no luck. I've ensured all of the #material-ui packages have been removed from my package.json file as well. These are my dependencies from package.json:
"dependencies": {
"#auth0/auth0-react": "^1.4.0",
"#date-io/date-fns": "^1.3.13",
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#mui/material": "^5.0.6",
"#mui/styles": "^5.0.2",
"#sentry/react": "^6.11.0",
"#sentry/tracing": "^6.11.0",
"babel-preset-next": "^1.4.0",
"d3": "7.1.1",
"date-fns": "^2.20.2",
"date-fns-timezone": "0.1.4",
"dotenv": "^8.2.0",
"formik": "^2.2.6",
"logrocket": "^2.0.0",
"logrocket-react": "^4.0.1",
"luxon": "^1.26.0",
"next": "^11.1.1",
"next-optimized-images": "^2.6.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-swipeable-views": "^0.13.9"
},
The dependencies you provided works (at least on my machine). Try deleting yarn.lock and package-lock.json and do a fresh install again to update your packages to the newer versions.
I'm doing tests with this isomorphic app:
https://github.com/yoonic/nicistore
I am trying to update React from version 0.13.3 to the current version 15.6.1. But when I make npm run dev, I get the following error:
Unhandled Server Error (Oops!) +4ms TypeError: Cannot read property 'run' of undefined
at callee$1$0$ (/Users/biel/workspace/sonder/client/src/server.js:141:9)
at tryCatch (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:61:40)
at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:328:22)
at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:94:21)
at GeneratorFunctionPrototype.invoke (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:136:37)
Here dependencies of my package.json:
"dependencies": {
"async": "1.5.2",
"babel": "5.8.38",
"css-loader": "0.18.0",
"debug": "2.2.0",
"expose-loader": "0.7.0",
"express": "4.13.3",
"file-loader": "0.8.4",
"flux": "^3.1.3",
"fluxible": "^1.4.0",
"fluxible-addons-react": "^0.2.13",
"intl": "1.1.0",
"intl-locales-supported": "1.0.0",
"marked": "^0.3.5",
"moment": "^2.13.0",
"node-sass": "4.5.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-ga": "^2.2.0",
"react-intl": "1.2.2",
"react-router": "4.2.0",
"react-view-pager": "^0.5.1",
"react-with-addons": "0.0.1",
"sass-loader": "2.0.1",
"serialize-javascript": "1.2.0",
"style-loader": "0.12.4",
"superagent": "1.8.3"
}
Here devDependencies of my package.json:
"devDependencies": {
"autoprefixer-loader": "3.1.0",
"babel-core": "5.8.38",
"babel-loader": "5.4.0",
"babel-runtime": "5.8.38",
"extract-text-webpack-plugin": "1.0.1",
"livereload-js": "^2.2.2",
"strip-loader": "0.1.2",
"webpack": "1.12.15",
"webpack-dev-server": "1.10.1",
"webpack-livereload-plugin": "^0.11.0",
"webpack-stats-plugin": "0.1.1"
}
Here my modified server.js:
https://gist.github.com/BiliWeiss/f150c8f3ae1373243a23eb03137a51f4
I've read that since the release of React Router v1.0, the run method has been removed and I changed for ReactDOM.render:
...
ReactDOM.render(app.getComponent(), req.originalUrl, async function (Handler, state) {
// Trigger fetching and wait for the data required by the components of the given route
await fetchData(context, state);
...
But now, I get:
Unhandled Server Error (Oops!) +11ms { Invariant Violation: _registerComponent(...): Target container is not a DOM element.
at invariant (/Users/biel/workspace/sonder/client/node_modules/fbjs/lib/invariant.js:44:15)
at Object._renderNewRootComponent (/Users/biel/workspace/sonder/client/node_modules/react-dom/lib/ReactMount.js:310:76)
at Object._renderSubtreeIntoContainer (/Users/biel/workspace/sonder/client/node_modules/react-dom/lib/ReactMount.js:401:32)
at Object.render (/Users/biel/workspace/sonder/client/node_modules/react-dom/lib/ReactMount.js:422:23)
at callee$1$0$ (/Users/biel/workspace/sonder/client/src/server.js:141:18)
at tryCatch (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:61:40)
at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:328:22)
at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:94:21)
at GeneratorFunctionPrototype.invoke (/Users/biel/workspace/sonder/client/node_modules/regenerator/runtime.js:136:37) name: 'Invariant Violation', framesToPop: 1 }
Anyone know what I'm doing wrong can help me?
First of all, the gist you gave doesn't seem relevant in my own
opinion. If this answer doesn't resolve your issue, I'd suggest giving
some more material to look at.
That said, according to the documentation, ReactDom.render() takes at least 2 arguments : the first one is the React component you want to render in your html, the second one is the targeted dom element you want to inject your component in.
Example :
ReactDOM.render(
<MyComponent />,
document.getElementById('dom-target-id')
)
I don't read anything like that in your code.
By the way, async data call sould not be done in the ReactDome.render() function. Dom rendering must happen only after you've done your magic assync calls. It's task is to render things, not handeling this kind of stuff.
I'd suggest you to seperate concerns and make your calls way before rendering.
Maybe you should have a look at this reference : https://facebook.github.io/react/docs/react-dom.html#reference
Last but not least, if you want to make some tests and experiences,
create react app is very good command line interface to scaffold react
applications and test things safely. It uses latest dependencies
(meaning react 15+ and reactdom 15+).
Hope that'll 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)