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?
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.
i am having issues while trying to build my storybook with rollup.js, in my react components i am using #mui/material and in their installation page its asked to also install both packages called #emotion/react and #emotion/styled but whenever i try building with rollup.js npm run build-lib i get the following error below which i think might be related to #mui/material or #emotion/react not very sure but how can i resolve this? thanks very much.
error
> rollup -c
[!] Error: 'default' is not exported by node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js, imported by node_modules/#emotion/react/_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/#emotion/react/_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js (1:7)
1: import hoistNonReactStatics$1 from 'hoist-non-react-statics';
^
2:
3: // this file isolates this package that is not tree-shakeable
Error: 'default' is not exported by node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js, imported by node_modules/#emotion/react/_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js
peerDependencies
"peerDependencies": {
"prop-types": "^15.8.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-router-hash-link": "^2.4.3"
},
dependencies
"dependencies": {
"#babel/preset-stage-0": "^7.8.3",
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#fontsource/dm-sans": "^4.5.6",
"#mui/icons-material": "^5.6.2",
"#mui/material": "^5.6.2",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^14.1.1",
"react-scripts": "5.0.1",
"react-slick": "^0.29.0",
"rollup-plugin-terser": "^7.0.2",
"slick-carousel": "^1.8.1",
"url-loader": "^4.1.1",
"web-vitals": "^2.1.4"
},
devDependencies
"devDependencies": {
"#babel/core": "^7.17.9",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"#rollup/plugin-image": "^2.1.1",
"#rollup/plugin-node-resolve": "^13.2.1",
"#storybook/addon-actions": "^6.4.22",
"#storybook/addon-essentials": "^6.4.22",
"#storybook/addon-interactions": "^6.4.22",
"#storybook/addon-links": "^6.4.22",
"#storybook/builder-webpack5": "^6.4.22",
"#storybook/manager-webpack5": "^6.4.22",
"#storybook/react": "^6.4.22",
"#storybook/testing-library": "0.0.11",
"#svgr/webpack": "^6.2.1",
"babel-loader": "^8.2.5",
"babel-preset-gatsby": "^2.12.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^6.7.1",
"path": "^0.12.7",
"prop-types": "^15.8.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"rollup": "^2.70.2",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"style-loader": "^3.3.1",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
}
scripts
"scripts": {
"build": "webpack",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"build-lib": "rollup -c"
},
Was having the same error, I was able to resolve this by using the #rollup/plugin-commonjs in my rollup.config.js
https://github.com/rollup/plugins/tree/master/packages/commonjs#custom-named-exports
I am trying to install node_modules for my project, but instead of loading the libraries in package.json, npm install the latest ones. Before I used the command npm to install -g npm#latest, did it have any effect?
I tried npm install --force, npm install --legacy-peer-deps, and remove node but it has same error
My package.
{
"name": "",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"#ant-design/icons": "^4.0.0",
"#ant-design/pro-descriptions": "^1.2.0",
"#ant-design/pro-form": "^1.15.1",
"#ant-design/pro-layout": "^6.9.4",
"#ant-design/pro-table": "^2.17.3",
"#ant-design/pro-utils": "^1.8.0",
"#react-hook/resize-observer": "^1.2.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/lodash": "^4.14.168",
"#types/node": "^12.0.0",
"#types/react": "^16.9.53",
"#types/react-dom": "^16.9.8",
"#types/react-router-dom": "^5.1.7",
"antd": "^4.11.1",
"antd-img-crop": "^3.14.1",
"axios": "^0.21.1",
"cookies": "^0.8.0",
"env-cmd": "^10.1.0",
"exceljs": "^4.2.0",
"file-saver": "^2.0.5",
"immer": "^8.0.1",
"js-cookie": "^2.2.1",
"less": "^4.1.0",
"less-loader": "^7.3.0",
"loadable": "^1.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-intl": "^5.10.18",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"read-excel-file": "^5.0.0",
"redux-injectors": "^1.3.0",
"redux-saga": "^1.1.3",
"typed-redux-saga": "1.2.0",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4",
"xlsx": "^0.16.9"
}
Error Screenshot
Thanks so much
The caret ^ means it can install the most recent compatible version. If you want it to install a specific version, you can remove the ^ in front of the versions.
See package.json docs
and semver
The caret will let it install a later version that doesn't change the first number. For instance your package.json specifies ^4.0.0 for #ant-design/icons, but it installed 4.6.2. Since the 4 didn't change, that is acceptable.
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!