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:
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...