Error while creating reactjs web component library using @mui

Question

I want to create a reactjs library with my personalized components from @mui

It works fine without such components but when I add anything from it I have the following error:

index.js:647 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:
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 
Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (index.js:2011:1)
    at useTheme$3 (index.js:11650:1)
    at ThemeProvider$1 (index.js:11690:1)
    at renderWithHooks (react-dom.development.js:16316:1)
    at mountIndeterminateComponent (react-dom.development.js:19986:1)
    at beginWork (react-dom.development.js:21454:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4112:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4161:1)
    at invokeGuardedCallback (react-dom.development.js:4223:1)
    at beginWork$1 (react-dom.development.js:27241:1)

It seems I have the case number 3, 'multiple copies of React in the same app' but I have no idea how to fix it, there's a way to use libraries like @mui inside my react components?

here is my rollup configuration:

import peerDepsExternal from "rollup-plugin-peer-deps-external"
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import image from "@rollup/plugin-image";
import dts from "rollup-plugin-dts";

const packageJson = require("./package.json");

export default [
    {
        input: "src/index.ts",
        output: [
            {
                file: packageJson.main,
                format: "cjs",
                sourcemap: true,
            },
            {
                file: packageJson.module,
                format: "esm",
                sourcemap: true,
            },
        ],
        plugins: [
            peerDepsExternal(),
            resolve(),
            commonjs(),
            typescript({tsconfig: "./tsconfig.json"}),
            image(),
            postcss(),
        ],
    },
    {
        input: "dist/esm/types/index.d.ts",
        output: [{file: "dist/index.d.ts", format: "esm"}],
        plugins: [dts()],
        external: [/\.css$/],
    },
];

Guilherme · Accepted Answer · 2022-07-19 12:46:50Z

3

Found it! I will leave it here for reference...

All dependencies that you may have in both projects ( library and consumer) needs to be added as peedDependecies in your library package.json.

"dependencies": {
// moved from here
 }
"peerDependencies": {
// to here
    "react": "^18.2.0",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.0.0"
  },

in your consumer app package.json be sure to add the same dependencies and versions.

answered Jul 19, 2022 at 12:46

Guilherme

6231 gold badge8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BE KNOW DO Over a year ago

I think this is one of the most frustrating issues I've come across in years. Unfortunately, this didn't work for me either :-(

Collectives™ on Stack Overflow

Error while creating reactjs web component library using @mui

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related