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'm trying to run my custom react component library through storybook with nx.
Expected Result
Whenever I run nx run my-lib:storybook command the storybook will open successfuly.
Actual results
After running the command I see the following error:
webpack built preview 90be684218940772f424 in 162ms Error: NormalModuleFactory.beforeResolve (IgnorePlugin) is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created. at .....
Screenshot from nx cloud:
Dependencies of my app
"dependencies": {
"#emotion/react": "11.9.3",
"#emotion/styled": "11.9.3",
"#rollup/plugin-commonjs": "21.1.0",
"#testing-library/jest-dom": "5.15.1",
"axios": "0.24.0",
"core-js": "3.6.5",
"http-proxy-middleware": "2.0.1",
"jszip": "3.7.1",
"msw": "0.36.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-slick": "0.28.1",
"react-router-dom": "6.0.2",
"react-canvas-draw": "1.2.1",
"react-lottie-player": "1.4.1",
"react-zoom-pan-pinch": "2.1.3",
"regenerator-runtime": "0.13.7",
"tiny-cookie": "2.3.2",
"tslib": "2.3.0"
},
"devDependencies": {
"#babel/core": "7.16.0",
"#babel/plugin-proposal-private-property-in-object": "7.16.7",
"#babel/preset-env": "7.16.4",
"#babel/preset-react": "7.18.6",
"#babel/preset-typescript": "7.18.6",
"#craco/craco": "6.4.5",
"#emotion/babel-plugin": "11.9.2",
"#nrwl/cli": "14.4.3",
"#nrwl/cypress": "14.4.3",
"#nrwl/eslint-plugin-nx": "14.4.3",
"#nrwl/linter": "14.4.3",
"#nrwl/nx-cloud": "latest",
"#nrwl/react": "14.4.3",
"#nrwl/storybook": "14.4.3",
"#nrwl/web": "14.4.3",
"#nrwl/workspace": "14.4.3",
"#storybook/addon-essentials": "6.5.9",
"#storybook/builder-webpack5": "6.5.9",
"#storybook/core-server": "6.5.9",
"#storybook/manager-webpack5": "6.5.9",
"#storybook/react": "6.5.9",
"#svgr/webpack": "5.4.0",
"#testing-library/react": "11.2.7",
"#testing-library/react-hooks": "7.0.2",
"#testing-library/user-event": "12.8.3",
"#types/jest": "27.4.1",
"#types/node": "17.0.22",
"#types/qs": "6.9.7",
"#types/react": "17.0.37",
"#types/react-canvas-draw": "1.1.1",
"#types/react-dom": "17.0.14",
"#types/react-slick": "0.23.8",
"#typescript-eslint/eslint-plugin": "5.29.0",
"#typescript-eslint/parser": "5.29.0",
"babel-jest": "27.5.1",
"babel-loader": "8.1.0",
"cypress": "9.1.0",
"eslint": "8.15.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-airbnb-typescript": "16.1.0",
"eslint-config-prettier": "8.3.0",
"eslint-config-react-app": "7.0.1",
"eslint-plugin-cypress": "2.10.3",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.30.1",
"husky": "7.0.4",
"jest": "27.5.1",
"jest-mock": "27.5.1",
"jest-watch-typeahead": "2.0.0",
"lint-staged": "12.1.2",
"nx": "14.4.3",
"prettier": "2.6.2",
"react-scripts": "4.0.3",
"react-test-renderer": "17.0.2",
"sass": "1.44.0",
"ts-jest": "27.1.4",
"ts-node": "10.4.0",
"typescript": "4.5.2",
"url-loader": "3.0.0",
"web-vitals": "2.1.4"
},
I think it's something related to webpack versions but it's only a guess.
Thank you for your help.
I found this issue reported on the Storybook GitHub. Can you check if it provides a workaround for the issue you are facing? They look similar.
What exactly does this mean?
I have React 15.4 installed, yet it complains.
Not sure why the other two appeared.
What does the prepending + and ` mean?
+-- UNMET PEER DEPENDENCY popper.js#^1.16.0
+-- pretty-checkbox#3.0.3
`-- UNMET PEER DEPENDENCY react#15.4.0
Package.js
{
"private": true,
"scripts": {
"transport": "watchify js/app.js -v -t babelify -p livereactload -o public/js/bundle.js",
"ES6-to-ES5": "npx babel es6 --watch --presets babel-preset-env --out-dir js",
"watch": "gulp medicus-watch"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"bootstrap-sass": "^3.3.7",
"browserify": "^14.3.0",
"cross-env": "^3.2.3",
"del": "^2.2.2",
"fakerator": "^0.3.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-less": "^3.3.0",
"gulp-livereload": "^3.8.1",
"gulp-uglify": "^3.0.0",
"gulp-zip": "^4.0.0",
"laravel-elixir": "^5.0.0",
"laravel-mix": "0.*",
"livereactload": "^3.3.0",
"lodash": "^4.17.4",
"react-proxy": "^1.1.8",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"vue": "^2.1.10",
"watchify": "^3.9.0"
},
"dependencies": {
"axios": "^0.15.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^7.3.0",
"create-react-class": "^15.6.0",
"draft-js": "^0.11.4",
"draftjs-to-html": "0.9.1",
"fixed-data-table-2": "^0.7.17",
"jquery": "^3.2.1",
"moment": "^2.18.1",
"node-sass": "^4.5.3",
"pretty-checkbox": "^3.0.3",
"prop-types": "^15.5.10",
"ramda": "^0.23.0",
"react": "^15.4.0",
"react-bootstrap": "^0.31.0",
"react-bootstrap-datetimepicker": "0.0.22",
"react-dom": "^15.4.0",
"react-draft-wysiwyg": "^1.14.4",
"react-google-charts": "^1.5.5",
"react-native-html-to-pdf": "^0.8.0",
"react-radio-buttons": "^1.2.2",
"react-redux": "^4.3.0",
"react-router": "^4.1.1",
"react-router-dom": "^4.2.2",
"react-sortable-hoc": "^0.6.8",
"react-widgets": "^3.4.8",
"redux": "^3.7.2",
"redux-form": "^6.8.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0"
},
"browserify": {
"transform": [
[
"babelify"
]
]
}
}
Package-lock.json
.
.
.
"react": {
"version": "15.4.0",
"resolved": "https://registry.npmjs.org/react/-/react-15.4.0.tgz",
"integrity": "sha1-c2wcfFQugIgScQbh9FCwEPhtFys=",
"requires": {
"fbjs": "^0.8.4",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.0"
}
},
.
.
.
I have a component library that exports components
// Test.tsx
import React from 'react';
const Test = () => <p>Test</p>;
export default Test;
and
// TestB.tsx
import React from 'react';
import { Typography } from '#material-ui/core';
const TestB = () => <Typography>TestB</Typography>;
export default TestB
In my other package I'm importing the components as so
import React from 'react';
import { Box } from '#components';
import { Test, TestB } from 'component-library';
const Example = (): JSX.Element | null => {
return (
<Box mb={3}>
<Test />
<TestB />
</Box>
);
};
export default Example;
When I import Test I get the expected <p>Test</p> but when I import TestB I get the following error:
react.development.js:1476 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 https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476)
at Object.useContext (react.development.js:1484)
at useTheme (useTheme.js:4)
at useStyles (makeStyles.js:222)
at WithStyles (withStyles.js:55)
at renderWithHooks (react-dom.development.js:14803)
at updateForwardRef (react-dom.development.js:16816)
at beginWork (react-dom.development.js:18645)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
I have confirmed react and react-dom are both on the version 16.9.0
-- though this doesn't seem relevant since it will work with Test, but not TestB
I don't see how I could be breaking the Rules of Hooks with the implementation of TestB since it doesn't use any hooks
I have tried removing all but one version inclusion of react through package.json
-- again this doesn't seem relevant since it will work with Test, but not TestB
Component Library package.json dependencies
"dependencies": {
"#material-ui/core": "4.11.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"react-svg": "^13.0.6"
},
"devDependencies": {
"#babel/core": "^7.14.3",
"#types/jest": "^24.0.24",
"#typescript-eslint/eslint-plugin": "^4.25.0",
"#typescript-eslint/parser": "^4.25.0",
"babel-loader": "^8.2.2",
"eslint": "^7.27.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"jest": "^24.9.0",
"rollup": "^1.27.13",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-typescript2": "^0.25.3",
"standard": "^14.3.1",
"standard-prettier": "^1.0.1",
"ts-jest": "^24.2.0",
"typescript": "^3.7.3"
},
Projects package.json dependencies
"dependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-flow-strip-types": "^7.1.6",
"#babel/plugin-transform-modules-commonjs": "^7.4.3",
"#babel/polyfill": "^7.6.0",
"#babel/preset-env": "^7.9.0",
"#babel/preset-react": "^7.0.0",
"#babel/preset-typescript": "^7.9.0",
"#date-io/moment": "1.x",
"#emotion/core": "^10.0.10",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#material-ui/pickers": "^3.2.10",
"#stripe/react-stripe-js": "^1.1.2",
"#stripe/stripe-js": "^1.4.0",
"#styled-system/css": "^1.0.3",
"#typeform/embed": "^0.5.12",
"attr-accept": "^1.1.0",
"autoprefixer": "^8.0.0",
"awesome-typescript-loader": "^4.0.0",
"axios": "^0.19.2",
"babel-loader": "^8.0.4",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-styled-components": "^1.10.0",
"classnames": "^2.2.5",
"compression-webpack-plugin": "^1.0.0",
"core-js": "^3.2.1",
"cropperjs": "^1.3.3",
"css-hot-loader": "^1.3.6",
"css-loader": "^0.28.7",
"d3": "^6.2.0",
"d3-selection": "^2.0.0",
"date-fns": "^2.9.0",
"dot-prop-immutable": "^1.4.0",
"downshift": "^5.0.3",
"emotion-theming": "^10.0.10",
"empty": "^0.10.1",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"enzyme-to-json": "^3.3.4",
"eslint": "^7.3.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jest": "^21.5.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.5.1",
"extract-text-webpack-plugin": "^3.0.1",
"faker": "^4.1.0",
"fetch-mock": "^6.5.2",
"file-loader": "^0.11.2",
"file-saver": "^2.0.2",
"final-form": "^4.20.1",
"final-form-arrays": "^3.0.2",
"final-form-calculate": "^1.3.1",
"glob": "^7.1.2",
"hellosign-embedded": "^2.8.0",
"identity-obj-proxy": "^3.0.0",
"isomorphic-fetch": "^2.2.1",
"js-yaml": "^3.10.0",
"jwt-decode": "^2.2.0",
"lint-staged": "^10.2.11",
"loaders.css": "^0.1.2",
"lost": "^8.2.0",
"components": "https://github.com/example/components#dev",
"mock-geolocation": "^1.0.11",
"moment": "2.24.0",
"moment-locales-webpack-plugin": "^1.2.0",
"moment-timezone": "^0.5.28",
"node-sass": "^4.12.0",
"notistack": "^0.9.11",
"numeral": "^2.0.6",
"path-complete-extname": "^1.0.0",
"postcss-automath": "^1.0.1",
"postcss-calc": "^7.0.2",
"postcss-flexbugs-fixes": "^3.2.0",
"postcss-font-magician": "^2.0.0",
"postcss-import": "^10.0.0",
"postcss-initial": "^2.0.0",
"postcss-loader": "^2.0.6",
"postcss-smart-import": "^0.7.5",
"precss": "^2.0.0",
"prettier-eslint": "^8.7.0",
"prop-types": "^15.5.10",
"qs": "^6.5.1",
"ramda": "^0.27.1",
"rc-time-picker": "^3.7.2",
"react": "17.0.2",
"react-addons-shallow-compare": "^15.6.0",
"react-confetti": "^6.0.0",
"react-content-loader": "^4.0.1",
"react-cropper": "^1.0.1",
"react-dates": "^21.8.0",
"react-datetime": "^2.16.3",
"react-dom": "17.0.2",
"react-final-form": "^6.5.1",
"react-final-form-arrays": "^3.1.2",
"react-final-form-listeners": "^1.0.3",
"react-hot-loader": "^4.6.3",
"react-measure": "^2.0.2",
"react-modal": "^3.8.1",
"react-motion": "^0.5.1",
"react-onclickoutside": "^6.7.0",
"react-portal": "^4.0.0",
"react-pose": "^4.0.8",
"react-pose-text": "^3.1.0",
"react-query": "^2.5.13",
"react-redux": "^7.2.0",
"react-resize-detector": "^6.6.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-select": "^1.0.0-rc.10",
"react-svg-loader": "^1.1.1",
"react-switch": "^2.0.0",
"react-table": "^7.0.1",
"react-tabs": "^2.2.2",
"react-test-renderer": "^16.5.2",
"react-text-mask": "^5.4.3",
"react-textfit": "^1.1.0",
"react-use": "^15.3.4",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.6",
"react-window-infinite-loader": "^1.0.5",
"react-youtube": "^7.5.0",
"react_ujs": "^2.4.4",
"recompose": "^0.26.0",
"redux": "^4.0.1",
"redux-actions": "^2.6.5",
"redux-analytics": "^0.3.1",
"redux-form": "^8.3.6",
"redux-mock-store": "^1.4.0",
"redux-observable": "^1.1.0",
"redux-persist": "^5.6.12",
"redux-responsive": "^4.3.8",
"redux-thunk": "^2.2.0",
"regenerator-runtime": "^0.11.0",
"reselect": "^3.0.1",
"resolve-url-loader": "^2.1.0",
"rxjs": "^6.4.0",
"sass-loader": "^6.0.6",
"shortid": "^2.2.8",
"sinon": "^6.3.5",
"start-server-and-test": "^1.7.11",
"style-loader": "^0.18.2",
"styled-components": "^4.1.3",
"styled-normalize": "^8.0.4",
"styled-system": "^3.2.1",
"svg-react-loader": "^0.4.5",
"swr": "^0.2.0",
"ts-jest": "^23.1.3",
"typescript": "^3.8.3",
"typings-for-css-modules-loader": "^1.7.0",
"warnings-to-errors-webpack-plugin": "^2.0.1",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-dev-server": "^2.7.1",
"webpack-manifest-plugin": "^1.3.1",
"webpack-merge": "^4.1.0",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"#svgr/cli": "^5.4.0",
"#testing-library/cypress": "^6.0.0",
"#testing-library/react": "^8.0.6",
"#types/classnames": "^2.2.3",
"#types/faker": "^4.1.4",
"#types/fetch-mock": "^6.0.3",
"#types/intercom-web": "^2.8.7",
"#types/jest": "^25.2.3",
"#types/jwt-decode": "^2.2.1",
"#types/moment-timezone": "^0.5.4",
"#types/qs": "^6.5.1",
"#types/query-string": "^6.3.0",
"#types/ramda": "^0.27.36",
"#types/react": "^16.7.20",
"#types/react-content-loader": "^3.1.4",
"#types/react-dates": "^17.1.14",
"#types/react-dom": "^16.0.11",
"#types/react-loadable": "^5.4.2",
"#types/react-measure": "^2.0.2",
"#types/react-modal": "^3.8.2",
"#types/react-motion": "^0.0.26",
"#types/react-onclickoutside": "^6.0.3",
"#types/react-redux": "^7.1.9",
"#types/react-router-dom": "^5.1.3",
"#types/react-select": "^1.2.7",
"#types/react-table": "^7.0.13",
"#types/react-test-renderer": "^16.0.2",
"#types/recompose": "^0.26.1",
"#types/redux-actions": "^2.6.0",
"#types/redux-form": "^7.4.16",
"#types/redux-mock-store": "^1.0.0",
"#types/shortid": "^0.0.29",
"#types/sinon": "^5.0.5",
"#types/styled-components": "^4.1.18",
"#types/styled-system": "^3.1.1",
"#types/webpack-env": "^1.13.6",
"#typescript-eslint/eslint-plugin": "^3.4.0",
"#typescript-eslint/parser": "^3.4.0",
"cypress": "6.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"jest": "^26.0.1",
"miragejs": "^0.1.35",
"pre-commit": "^1.2.2",
"prettier": "^2.0.5"
},
Any thoughts?
Moving everything to devDependencies for the most part and adding the prepare script seemed to be what I was missing.
My package.json ended up looking like this
{
"version": "0.1.0",
"main": "dist/index.js",
"module": "build/index.es.js",
"jsnext:main": "build/index.es.js",
"files": ["dist", "build"],
"scripts": {
"prepare": "npm run build",
"build": "rollup -c",
"format": "prettier-standard --format",
"test": "jest --coverage",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"lint": "eslint 'src/**/*.{{j,t}s,{j,t}sx}'",
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {},
"peerDependencies": {
"#material-ui/core": "4.11.4",
"react": "^16"
},
"devDependencies": {
"#babel/core": "^7.14.3",
"#material-ui/core": "4.11.4",
"#storybook/addon-actions": "^6.2.9",
"#storybook/addon-essentials": "^6.2.9",
"#storybook/addon-knobs": "^6.2.9",
"#storybook/addon-links": "^6.2.9",
"#storybook/react": "^6.2.9",
"#types/jest": "^24.0.24",
"#typescript-eslint/eslint-plugin": "^4.25.0",
"#typescript-eslint/parser": "^4.25.0",
"babel-loader": "^8.2.2",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-react": "^7.23.2",
"eslint": "^7.27.0",
"jest": "^24.9.0",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"react-svg": "^13.0.6",
"react": "^17.0.2",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-typescript2": "^0.25.3",
"rollup": "^1.27.13",
"standard-prettier": "^1.0.1",
"standard": "^14.3.1",
"storybook-addon-paddings": "^4.1.1",
"storybook-dark-mode": "^1.0.8",
"ts-jest": "^24.2.0",
"typescript": "^3.7.3"
},
"jest": {
"preset": "ts-jest",
"testEnvironment": "node"
},
"standard": {
"ignore": [
"node_modules/",
"build/"
]
}
}
And rollup.config by request
import typescript from 'rollup-plugin-typescript2'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import resolve from 'rollup-plugin-node-resolve'
import pkg from './package.json'
export default {
input: 'src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs',
exports: 'named',
sourcemap: true
},
{
file: pkg.module,
format: 'es',
exports: 'named',
sourcemap: true
}
],
external: ["react", "#material-ui/core", "react-is"],
plugins: [
external(),
resolve(),
typescript({
rollupCommonJSResolveHack: true,
exclude: [
'**/__tests__/**',
'**/*.stories.*'
],
clean: true
}),
commonjs({
include: ['node_modules/**'],
namedExports: {}
})
]
}
I had exactly the same setup and problem, but I focussed too much on the problem, that the imported MUI-component is calling this error. But when you read the error message closely, there is also the possibility of "You might have more than one copy of React in the same app". The reason for my wrong conclusion was that my app did not throw an error once I removed the MUI component. Accordingly, it could not be the React error. Unfortunately, this was not the case! After some more desperate research on every detail, I found this post: Invalid Hook call....
So inside the APP folder (which is using your library) I ran the command npm link <path_to_local_library>/node_modules/react, which fixed my error. See the details for npm link.
When i run my react project i get this following vulnerabilities:
How can i fix this problem?
And can anyone please explain me what this actually is warning me about?
Do i need to update babel-cli?
I have tried to install braces#2.3.0 to see if this warning get away, but nothing changes when i install it.
My package.json file:
{
"name": "Recordshop",
"version": "1.0.0",
"scripts": {
"prestart": "babel-node src-gen/config/startMessage.js",
"start": "npm-run-all --parallel open:src-gen lint:watch",
"open:src-gen": "babel-node src-gen/config/server.dev.js",
"lint": "node_modules/.bin/esw webpack.config.* src-gen src-gen/config",
"lint:watch": "npm run lint -- --watch",
"clean-prod": "npm run remove-prod && mkdirp prod/app",
"remove-prod": "node_modules/.bin/rimraf ./prod",
"build:html": "babel-node src-gen/config/buildHTML.js",
"prebuild": "npm-run-all clean-prod lint build:html",
"build": "babel-node src-gen/config/build.js",
"postbuild": "babel-node src-gen/config/server.prod.js"
},
"private": true,
"optionalDependencies": {
"fsevents": "*"
},
"dependencies": {
"babel-polyfill": "^6.23.0",
"es6-promise": "^4.0.5",
"isomorphic-fetch": "^2.2.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-fontawesome": "^1.6.1",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.7",
"reduce-reducers": "^0.1.2",
"redux": "^3.6.0",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"ajv": "^5.0.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-react-display-name": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "6.24.1",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-register": "^6.24.1",
"chalk": "^2.1.0",
"cheerio": "^1.0.0-rc.2",
"colors": "^1.1.2",
"compression": "^1.6.2",
"compression-webpack-plugin": "^1.1.11",
"cross-env": "^5.0.0",
"css-loader": "^2.1.1",
"eslint": "^4.19.0",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-react": "^7.0.1",
"eslint-watch": "^3.1.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"image-webpack-loader": "^4.2.0",
"jquery": "^3.1.1",
"mkdirp": "^0.5.1",
"node-sass": "^4.5.3",
"npm-run-all": "^4.0.2",
"open": "^6.3.0",
"redux-immutable-state-invariant": "^2.0.0",
"rimraf": "^2.5.4",
"sass-loader": "^6.0.5",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.32.2",
"webpack-combine-loaders": "^2.0.3",
"webpack-dev-middleware": "^2.0.5",
"webpack-hot-middleware": "^2.18.0"
}
}
Thank you for all help!
I got same error. And it was the babel-core error. Try update babel-core using yarn add --dev babel-jest babel-core#^7.0.0-bridge.0 #babel/core regenerator-runtime