A really great article, clear and explanatory!
Wanting to go a step further, if I include material-ui or react-bootstrap dependencies (as peerDependencies) in my component library I always have these errors in my react application:
Warning: 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:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:2318
___________________
Uncaught TypeError: Cannot read properties of null (reading 'useContext')
at Object.useContext (react-jsx-runtime.development.js:665:1)
at Button (react-dom.production.min.js:313:1)
at renderWithHooks (BreadcrumbItem.js:34:1)
at updateForwardRef (Dropdown.js:168:1)
at beginWork (Nav.js:53:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:19261:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:19310:1)
at invokeGuardedCallback (react-dom.development.js:19373:1)
at beginWork$1 (named-references.js:1:1)
at performUnitOfWork (events.js:84:1)
Yes. I'll start by saying even though ive done it before multiple times i STILL get errors I have trouble resolving when trying to create component libraries around existing ones like MUI. not sure why it needs to be so complicated but such as it is.
Yours is a common error and unfortunately it's one of those things that has nothing to do with what the error says. I'm sure the way you are using your hook is perfectly valid.
The cause of that error message is almost always from trying to load more than one copy of the React library. So for example if you have a project that has React as a dependency, but uses a library that also bundles the entire React library inside of itself. That's why we use "peerDependencies" in this demo, so that React/ReactDOM get installed with the user's app rather than being bundled with our package.
My suggestion would be to take a look at your dependencies in package.json and make sure that React & ReactDOM are peerDependencies rather than dependencies in the package you are building. Running "yarn install" or "npm install --legacy-peer-deps" will still install them in your node_modules folder, but not bundle them with your published version.
If using rollup lookup the "external" field in the rollup config and add all your react & mui packages to the "external" list to be absolutely sure they aren't included in your bundle
You can use this plugin as well to accomplish the same thing without having to set them explicitly in your config:
A really great article, clear and explanatory!
Wanting to go a step further, if I include material-ui or react-bootstrap dependencies (as peerDependencies) in my component library I always have these errors in my react application:
Warning: 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:
Do you have some suggestion about?
Thanks!
Yes. I'll start by saying even though ive done it before multiple times i STILL get errors I have trouble resolving when trying to create component libraries around existing ones like MUI. not sure why it needs to be so complicated but such as it is.
Yours is a common error and unfortunately it's one of those things that has nothing to do with what the error says. I'm sure the way you are using your hook is perfectly valid.
The cause of that error message is almost always from trying to load more than one copy of the React library. So for example if you have a project that has React as a dependency, but uses a library that also bundles the entire React library inside of itself. That's why we use "peerDependencies" in this demo, so that React/ReactDOM get installed with the user's app rather than being bundled with our package.
My suggestion would be to take a look at your dependencies in package.json and make sure that React & ReactDOM are peerDependencies rather than dependencies in the package you are building. Running "yarn install" or "npm install --legacy-peer-deps" will still install them in your node_modules folder, but not bundle them with your published version.
If using rollup lookup the "external" field in the rollup config and add all your react & mui packages to the "external" list to be absolutely sure they aren't included in your bundle
You can use this plugin as well to accomplish the same thing without having to set them explicitly in your config:
npmjs.com/package/rollup-plugin-pe...