Why nx is throwing error when running storybook - reactjs

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.

Related

Version upgrade issue of react-scripts v4-> v5 and craco v6 -> v7

In existing project we were trying to upgrade react-scripts from V4.0.3 => V5.0.1. After upgrade, Craco also need upgradation, so we have upgraded Craco V6.1.2 => V7.0.0. It creating issue with webpack-modernizr-loader. webpack-dev-server also not working. Below i have mentioned errors which i am facing.
node_modules/#craco/craco/dist/lib/plugin-utils.js:26
throw new Error("".concat(message, "\n\n") +
^
Error: failed to add webpack-modernizr-loader
This error probably occurred because you updated react-scripts or craco. Please try updating craco to the latest version:
$ yarn upgrade craco
Or:
$ npm update craco
If that doesn't work, craco needs to be fixed to support the latest version.
Please check to see if there's already an issue in the gsoft-inc/craco repo:
https://github.com/gsoft-inc/craco/issues?q=is%3Aissue+webpack
If not, please open an issue and we'll take a look. (Or you can send a PR!)
You might also want to look for related issues in the craco and create-react-app repos:
https://github.com/dilanx/craco/issues?q=is%3Aissue+webpack
https://github.com/facebook/create-react-app/issues?q=is%3Aissue+webpack
at throwUnexpectedConfigError (/node_modules/#craco/craco/dist/lib/plugin-utils.js:26:11)
at throwError (/client/craco.config.js:6:5)
at configure (/client/craco.config.js:52:40)
at giveTotalControl (/node_modules/#craco/craco/dist/lib/features/webpack/merge-webpack-config.js:76:25)
at mergeWebpackConfig (/node_modules/#craco/craco/dist/lib/features/webpack/merge-webpack-config.js:116:38)
at overrideWebpackDev (/node_modules/#craco/craco/dist/lib/features/webpack/override.js:8:80)
at //node_modules/#craco/craco/dist/scripts/start.js:21:39
npm ERR! Lifecycle script start-local failed with error:
npm ERR! Error: command failed
npm ERR! in workspace: client#1.0.0
npm ERR! at location: /client
Warning for Https & Middleware. Unable to resolve from config options.
waring
Craco Config:
const path = require('path');
const { addBeforeLoader, loaderByName, throwUnexpectedConfigError } = require('#craco/craco');
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const throwError = (message) =>
throwUnexpectedConfigError({
packageName: 'craco',
githubRepo: 'gsoft-inc/craco',
message,
githubIssueQuery: 'webpack',
});
module.exports = () => {
const plugins = [];
// if (process.env.NODE_ENV !== "production") {
// plugins.push(new BundleAnalyzerPlugin())
// }
return {
eslint: {
enable: true,
},
style: {
css: {
loaderOptions: {
modules: { localIdentName: '[local]_[hash:base64:5]' },
},
},
},
webpack: {
alias: {
react: path.resolve(__dirname, '../node_modules', 'react'),
'react-dom': path.resolve(__dirname, '../node_modules', 'react-dom'),
'modernizr': path.resolve(__dirname, "./.modernizrrc.js")
},
plugins,
configure: webpackConfig => {
// Adding modernizr loader Start
const modernizrLoader = {
loader: "webpack-modernizr-loader",
test: /\.modernizrrc\.js$/,
};
const { isAdded: modernizrLoaderIsAdded } = addBeforeLoader(webpackConfig, loaderByName('url-loader'), modernizrLoader);
if (!modernizrLoaderIsAdded) throwError('failed to add webpack-modernizr-loader');
// Adding modernizr loader End
const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
);
const [ clientSrc ] = webpackConfig.resolve.plugins[scopePluginIndex].appSrcs;
const psvServices = path.resolve(clientSrc,'../..');
webpackConfig.resolve.plugins[scopePluginIndex].appSrcs.push(psvServices);
return webpackConfig;
}
}
}
};
Tried to upgrade craco with react-scripts to latest versions. It's not working for me. Application is breaking by upgradation. Craco config style object not configuring properly, haviny issue with webpack-modernizr-loader.
Project dependencies:
"dependencies": {
"#babel/polyfill": "^7.0.0",
"#babel/runtime-corejs2": "^7.4.3",
"#instana/collector": "^1.129.0",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.49",
"algoliasearch": "^3.29.0",
"apollo-errors": "^1.9.0",
"apollo-server-koa": "^1.3.4",
"aws-sdk": "^2.281.1",
"base-64": "^0.1.0",
"basic-auth": "^2.0.0",
"blocked": "^1.3.0",
"bunyan": "^1.8.12",
"cheerio": "^1.0.0-rc.2",
"classnames": "^2.2.6",
"cls-hooked": "^4.2.2",
"consul": "^0.34.0",
"cross-env": "^5.2.0",
"crypto-js": "^3.1.9-1",
"csvtojson": "^1.1.9",
"date-fns": "^2.11.1",
"debug": "^3.1.0",
"dotenv": "^8.2.0",
"draft-js": "0.10.4",
"draft-js-export-html": "^1.3.3",
"draft-js-plugins-editor": "^2.1.1",
"ejs": "^3.1.8",
"element-scroll-polyfill": "^1.0.1",
"eslint-plugin-react-hooks": "^4.2.0",
"fetch-timeout": "^0.0.2",
"flexboxgrid": "^6.3.1",
"form-data": "^2.3.2",
"graphql": "^0.13.2",
"graphql-tools": "^3.0.5",
"hare-niemeyer": "^2.0.0",
"history": "^4.7.2",
"humps": "^2.0.1",
"jest-canvas-mock": "^2.2.0",
"joi": "^17.6.4",
"jsonwebtoken": "^8.3.0",
"koa": "^2.5.2",
"koa-body": "^4.0.4",
"koa-bunyan-logger": "^2.1.0",
"koa-compress": "^3.0.0",
"koa-convert": "^1.2.0",
"koa-cookie": "^1.0.0",
"koa-cors": "0.0.16",
"koa-json": "^2.0.2",
"koa-router": "^7.4.0",
"koa-validate": "^1.0.7",
"lodash": "^4.17.21",
"memoize-one": "^5.1.1",
"merge-graphql-schemas": "^1.5.1",
"modernizr": "^3.12.0",
"moment": "^2.29.4",
"moment-timezone": "^0.5.21",
"mutation-observer": "^1.0.3",
"node-fetch": "^2.6.7",
"normalize.css": "^8.0.0",
"npm-link-shared": "^0.5.6",
"oauth-1.0a": "^2.2.4",
"object-hash": "^1.3.1",
"openapi-request-validator": "^10.0.0",
"openapi-response-validator": "^10.0.0",
"openapi-schema-validator": "^10.0.0",
"parse-domain": "^2.1.6",
"pg": "^8.6.0",
"pg-format": "^1.0.4",
"pg-pool": "^3.2.2",
"prop-types": "^15.6.2",
"puresql": "^1.8.0",
"query-string": "5",
"raf": "^3.4.1",
"react": "^17.0.2",
"react-aria-live": "^2.0.5",
"react-card-flip": "^1.0.11",
"react-copy-to-clipboard": "^5.0.1",
"react-day-picker": "^7.1.10",
"react-dom": "^17.0.2",
"react-dotdotdot": "^1.2.3",
"react-dropzone": "^4.2.13",
"react-grid-layout": "^0.18.3",
"react-html-parser": "^2.0.2",
"react-lazyload": "^2.6.2",
"react-media": "^1.8.0",
"react-modal": "^3.5.1",
"react-paginate": "^6.2.1",
"react-popper": "^1.3.3",
"react-redux": "^7.2.6",
"react-router-dom": "5.3.0",
"react-scroll": "^1.7.10",
"react-split-pane": "^0.1.87",
"react-sticky": "^6.0.3",
"react-tabs": "^2.2.2",
"react-timeout": "^1.1.1",
"react-tooltip": "^3.11.1",
"react-transition-group": "^4.4.1",
"react-truncate": "^2.4.0",
"react-virtualized": "^9.21.0",
"reactable": "1.0.0",
"recharts": "^2.1.15",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.7",
"redux-localstorage": "^0.4.1",
"redux-thunk": "^2.3.0",
"request": "^2.88.0",
"request-ip": "^2.1.3",
"reselect": "^4.0.0",
"resize-observer-polyfill": "^1.5.1",
"sequelize": "^6.6.5",
"swagger2-koa": "^1.0.2",
"text-encoding": "^0.6.4",
"uglify-js": "^3.13.3",
"universal-cookie": "^2.2.0",
"url-pattern": "^1.0.3",
"use-resize-observer": "^6.1.0-alpha.3",
"uuid": "^3.3.2",
"validate.js": "^0.12.0",
"whatwg-fetch": "^3.4.1",
"xlsx": "^0.18.5"
},
"devDependencies": {
"#babel/cli": "^7.12.10",
"#babel/core": "^7.14.6",
"#babel/node": "^7.14.7",
"#babel/eslint-parser": "^7.19.1",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-transform-regenerator": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"#babel/preset-env": "^7.14.7",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"#craco/craco": "^7.0.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/react-hooks": "^7.0.0",
"#testing-library/user-event": "^12.1.10",
"#welldone-software/why-did-you-render": "^2.4.0",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
"autoprefixer": "^9.0.1",
"babel-jest": "^28.1.3",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^2.3.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"babel-runtime": "^6.23.0",
"browser-sync": "^2.27.10",
"command-line-args": "^5.0.2",
"concurrently": "^6.3.0",
"connect-history-api-fallback": "^1.5.0",
"css-loader": "^6.7.1",
"cypress-failed-log": "^2.1.0",
"enzyme": "^3.11.0",
"eslint": "^7.27.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-loader": "^1.9.0",
"eslint-plugin-flowtype": "^5.7.2",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.23.2",
"file-loader": "^1.1.11",
"highlight.js": "^9.12.0",
"husky": "^8.0.1",
"hygen": "^6.2.11",
"identity-obj-proxy": "^3.0.0",
"jest-junit": "^1.5.1",
"json-loader": "^0.5.7",
"lerna": "^5.4.0",
"local-ssl-proxy": "^1.3.0",
"madge": "^5.0.1",
"markdown-it": "^13.0.0",
"nodemon": "^2.0.20",
"path-to-regexp": "^2.2.1",
"pixrem": "^5.0.0",
"postcss": "^7.0.14",
"postcss-apply": "^0.12.0",
"postcss-calc": "^7.0.1",
"postcss-custom-properties": "^8.0.10",
"postcss-custom-selectors": "^5.1.2",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-media-minmax": "^4.0.0",
"postcss-nesting": "^7.0.0",
"postcss-selector-matches": "^4.0.0",
"postcss-selector-not": "^4.0.0",
"prettier": "^2.3.0",
"react-hot-loader": "^4.3.4",
"react-router-sitemap": "^1.2.0",
"react-scripts": "^5.0.1",
"react-test-renderer": "17.0.2",
"redux-mock-store": "^1.5.3",
"regenerator-runtime": "^0.13.2",
"rimraf": "^2.6.2",
"should": "^13.2.2",
"sqlite3": "^5.1.1",
"style-loader": "^3.3.1",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^19.0.0",
"url-loader": "^4.1.1",
"wait-for-expect": "^3.0.1",
"webpack-bundle-analyzer": "^4.4.2"
},

Upgrading Next11 to Next12

Attempting to upgrade Next 11 to Next 12. When I bump the next dependency to the latest
npm i next#latest
The application compiles successfully in the terminal but when I launch the page I get the following error on screen.
Looking at the upgrade docs for Next doesn't show anything apparent to me that would cause this error just by switching from 11 to 12.
Any help would be appreciated.
Package.json
"dependencies": {
"#apollo/client": "3.5.10",
"#wordpress/url": "^3.1.1",
"#wpengine/headless": "^0.6.3",
"eslint-config-next": "^12.1.6",
"graphql": "^15.5.1",
"html-react-parser": "^1.2.7",
"next": "^12.1.6",
"next-transpile-modules": "^9.0.0",
"npm-run-all": "^4.1.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass": "^1.32.5"
},
"devDependencies": {
"#graphql-codegen/cli": "^2.1.1",
"#graphql-codegen/typescript": "^2.1.0",
"#types/node": "^14.14.11",
"#types/react": "^17.0.0",
"#typescript-eslint/eslint-plugin": "^4.9.1",
"#typescript-eslint/parser": "^4.9.1",
"dotenv": "^10.0.0",
"eslint": "^7.15.0",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^7.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.2.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-simple-import-sort": "^6.0.1",
"eslint-plugin-use-encapsulation": "^1.0.0",
"husky": "^7.0.0",
"open-cli": "^6.0.1",
"prettier": "^2.5.1",
"rimraf": "^3.0.2",
"typescript": "^4.3.2",
"wait-on": "^5.2.1"
}

hoist-non-react-statics issue on rollup.js build

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

Adding MUI Component to Component Library results in Error "Hooks can only be called inside of the body of a functional component"

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.

Babel 5 plugin is being run with an unsupported Babel version. Tried to update babel-relay-plugin

Doing Lynda - Building and Deploying a Full-Stack React Application tutorial, and get stuck at a point, get following error:
./src/index.js
Error: [BABEL] /Users/kukodajanos/Workspace/ticket/src/index.js: The (relay-query) Babel 5 plugin is being run with an unsupported Babel version. (While processing: "/Users/kukodajanos/Workspace/ticket/node_modules/babel-plugin-react-relay/lib/index.js")
at Array.reduce (<anonymous>)
I tried suggestion written here: https://github.com/facebookarchive/relay-starter-kit/issues/74
npm i babel-relay-plugin#latest --save
It did not help, give same error.
Dependencies from package.json here:
"dependencies": {
"#babel/core": "7.5.5",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "1.13.0",
"#typescript-eslint/parser": "1.13.0",
"babel-eslint": "10.0.2",
"babel-jest": "^24.8.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.3",
"babel-preset-react-app": "^9.0.1",
"babel-relay-plugin": "^0.11.0",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"eslint": "^6.1.0",
"eslint-config-react-app": "^5.0.1",
"eslint-loader": "2.2.1",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.8.0",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.8.0",
"jest-watch-typeahead": "0.3.1",
"mini-css-extract-plugin": "0.5.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-app-polyfill": "^1.0.2",
"react-dev-utils": "^9.0.3",
"react-dom": "^16.9.0",
"react-router": "3.0.2",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"semver": "6.3.0",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.2",
"url-loader": "2.1.0",
"webpack": "4.39.1",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.3.1"
}
"devDependencies": {
"babel-plugin-react-relay": "^0.10.0"
}

Resources