I recently upgraded react, react-dom and their corresponding type packages from v16 to v18.
Since doing so, I get the following error on any Storybook story which features a React component:
at react-dom/client (http://127.0.0.1:8080/main.1187308f.iframe.bundle.js:1:486489)
at __webpack_require__ (http://127.0.0.1:8080/runtime~main.bb9256ec.iframe.bundle.js:1:381)
at __webpack_require__.t (http://127.0.0.1:8080/runtime~main.bb9256ec.iframe.bundle.js:1:1475)
This is a Typescript and Gatsby project. Here are the relevant dependencies/resolutions from package.json:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"#types/react": "^18.0.26",
"#types/react-dom": "^18.0.10",
"#storybook/addon-a11y": "^6.5.15",
"#storybook/addon-essentials": "^6.5.15",
"#storybook/addon-links": "^6.5.15",
"#storybook/addons": "^6.5.15",
"#storybook/builder-webpack5": "^6.5.15",
"#storybook/cli": "^6.5.15",
"#storybook/manager-webpack5": "^6.5.15",
"#storybook/react": "^6.5.15",
"#storybook/source-loader": "^6.5.15",
},
"resolutions": {
"#types/react": "^18.0.26",
"#types/react-dom": "^18.0.10"
}
For my main.js, I precisely copied the Gatsby Storybook instructions.
How can I fix this error and get a working storybook with React v18? Per this github issue comment it should be totally possible with Storybook 6.5+.
You have to use the old ReactDOM.render or upgrade your storybook to 7.beta version to use the new API of React.
It looks like it works when I remove this from the recommended Gatsby Config:
if (parseInt(React.version) <= 18) {
config.externals = ["react-dom/client"];
}
Perhaps they made an error, and this was supposed to be < not <=
Related
I'm using React (17.0.2), Chakra UI and Storybook (6.5.15) to create a component library. I don't use create-react-app because I don't really need to run it as an app. However, I can't get around the errors related to the core node modules that I receive like can't resolve module 'fs'. I have tried to add custom configuration to main.js for Storybook's webpack v5 so that it will ignore the node core modules like this:
webpackFinal: (config) => {
config.resolve.fallback.fs = false;
config.resolve.fallback.module = false;
config.resolve.fallback.os = false;
return config;
},
When I try to show the story for the component I receive the following error:
TypeError: fs[fsStatType] is not a function
at isTypeSync (http://localhost:6006/vendors-node_modules_chakra-ui_layout_dist_chakra-ui-layout_esm_js-node_modules_chakra-ui_spi-d8af64.iframe.bundle.js:116363:24)
at getDirectorySync (http://localhost:6006/vendors-node_modules_chakra-ui_layout_dist_chakra-ui-layout_esm_js-node_modules_chakra-ui_spi-d8af64.iframe.bundle.js:82082:61)
at ExplorerSync.searchSync (http://localhost:6006/vendors-node_modules_chakra-ui_layout_dist_chakra-ui-layout_esm_js-node_modules_chakra-ui_spi-d8af64.iframe.bundle.js:81910:63)
Below you'll find a list of the dev dependencies from my package.json.
"devDependencies": {
"#babel/cli": "^7.20.7",
"#babel/core": "^7.20.12",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"#chakra-ui/react": "^1.7.1",
"#chakra-ui/storybook-addon": "^4.0.16",
"#emotion/react": "^11.1.5",
"#emotion/styled": "^11.1.5",
"#rollup/plugin-babel": "^6.0.3",
"#rollup/plugin-commonjs": "^24.0.0",
"#rollup/plugin-node-resolve": "^15.0.1",
"#rollup/plugin-typescript": "^10.0.1",
"#storybook/addon-actions": "^6.5.15",
"#storybook/addon-essentials": "^6.5.15",
"#storybook/addon-interactions": "^6.5.15",
"#storybook/addon-links": "^6.5.15",
"#storybook/builder-webpack5": "^6.5.15",
"#storybook/manager-webpack5": "^6.5.15",
"#storybook/react": "^6.5.15",
"#storybook/testing-library": "0.0.13",
"#types/react": "^18.0.26",
"babel-loader": "^8.3.0",
"base64-arraybuffer": "^1.0.2",
"cross-fetch": "^3.1.5",
"crypto": "^1.0.1",
"framer-motion": "^6.5.0",
"jest-fetch-mock": "^3.0.3",
"js-cookie": "^3.0.1",
"jwt-decode": "^3.1.2",
"nanoid": "^4.0.0",
"njwt": "^1.2.0",
"node-polyfill-webpack-plugin": "^2.0.1",
"npm-run-all": "^4.1.5",
"randomstring": "^1.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rollup": "^3.9.1",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-dts": "^5.1.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"tslib": "^2.4.1",
"typescript": "^4.9.4",
"webpack": "^5.75.0"},
Does anyone have an idea on how to solve this issue?
I have tried to add the NodePolyfillPlugin plugin to webpack but I was still receiving errors related to fs, likely because it doesn't have a fallback for it and adding aliases with the modules to resolve it to node modules but I wasn't able to find an npm package for 'fs'. It seems deprecated?
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'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 trying to access data in the contextAPI via storybook but I couldn't manage it.
Please, keep in mind that there isn't any issue with the original pages, the context is working properly.
React version: 17.0.2
Storybook version: 6.2.7
Here is the devDep:
"devDependencies": {
"#storybook/addon-actions": "^6.2.7",
"#storybook/addon-essentials": "^6.2.7",
"#storybook/addon-links": "^6.2.7",
"#storybook/node-logger": "^6.2.7",
"#storybook/preset-create-react-app": "^3.1.7",
"#storybook/react": "^6.2.7",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.23.1",
"eslint-plugin-react-hooks": "^4.2.0",
"node-sass": "^5.0.0",
"prettier": "^2.2.1",
"sass": "^1.32.8"
}
I've added a decorator for the wrapper in preview.js file of Storybook.
addDecorator((storyFn) => <GlobalStore>{storyFn()}</GlobalStore>);
Then, in the X.stories.js, I'm trying to call useContext as usual:
import { GlobalContext } ...
import { useContext } ...
export const SampleStory = () => {
const { Variable } = useContext(GlobalContext);
But I'm am facing this error in the story:
Cannot read property 'Variable' of undefined
As a solution, I created a new component as a new/separated file and imported it through X.stories.js. This solution works but in this way, I have to create lots of unnecessary files which is useless.
Can you please tell me the correct way for that issue?
Thanks in advance, Cheers,
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).