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.