search

KaiHotz / react-rollup-boilerplate

Boilerplate for creating React component libraries, bundled with Rollup.js to ESM and/or CJS Modules, Storybook, Typescript
https://kaihotz.github.io/react-rollup-boilerplate/
MIT License
300 stars 67 forks source link

Material UI wrapper as a UI library with Rollup won't work #27

Closed mylonasg88 closed 2 years ago

mylonasg88 commented 2 years ago

I am writing a wrapper UI library on top of MUI (which is very classic these days I believe) and once I am including any components from the MaterialUI (MUI 5.x) I am getting these errors:

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 problem.
react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (react.development.js:1618:1)
    at index.es.js:102:1
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)

I am using boilerplate template as is and tier app is created with CRA v18.2. Add boilerplate app I use npm add ../react-rollup-boilerplate. Then in boilerplate app I install latest MUI and once I include a Button component from MUI in my custom component I get errors above.

I also tried to add external array:

  external: ['@emotion/styled', '@emotion/react', 'react', 'react-dom', '@mui/material'],

But with no luck. An other fella has described exactly same issue here.

KaiHotz commented 2 years ago

Well there might be a lot of reasons but according to the error message : "Cannot read properties of null (reading 'useContext') at Object.useContext (react.development.js:1618:1)" it seams you are most likely missing a Provider and that is not related to this boilerplate or Rollup.

Can you share your repo to have a look at your code ?