Invalid Hook call when importing a component library built on MUI

[sashafklein]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I've built a component library based on MUI. Following the pattern in MUI itself, the component library declares all dependencies (React, ReactDOM, MUI, Storybook, etc) as devDependencies, and the consuming application chooses which React version to run.

However, when I import my component library and render the Button based off MUI's button, I see the following error:

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:1)
    at Object.useContext (react.development.js:1484:1)
    at Button (Button.js:224:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at updateForwardRef (react-dom.development.js:17044:1)
    at beginWork (react-dom.development.js:19098:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
resolveDispatcher @ react.development.js:1476
useContext @ react.development.js:1484
Button @ Button.js:224
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:20085 

And:

The above error occurred in the <ForwardRef(Button)> component:

    at Button (http://localhost:3000/static/js/bundle.js:5167:69)
    at Button (http://localhost:3000/static/js/bundle.js:84085:25)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

This points to the MUI button component's use of React.useContext. Seems like this has to do with a mismatch of React version, but shouldn't the only React version be in the "consuming" application?

I have seen this issue, but unlike its author, I am not using npm link; instead I'm requiring the library locally (to test it out prior to publication): "my-component-library": "file:../cl".

I don't seem to have duplicate React versions:

npm list react react-dom
[email protected] /Users/sasha/code/cld
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├── [email protected]
└─┬ [email protected] (git+ssh://[email protected]/personal-handle/component-library.git#09b5db39d8aa8a76f7c1fecacdc3afaecd57812e)
  ├─┬ @emotion/[email protected]
  │ └── [email protected] deduped
  ├─┬ @emotion/[email protected]
  │ └── [email protected] deduped
  ├─┬ @mui/[email protected]
  │ └── [email protected] deduped
  ├─┬ @mui/[email protected]
  │ ├─┬ @mui/[email protected]
  │ │ ├── [email protected] deduped
  │ │ └── [email protected] deduped
  │ ├─┬ @mui/[email protected]
  │ │ ├─┬ @mui/[email protected]
  │ │ │ └── [email protected] deduped
  │ │ ├─┬ @mui/[email protected]
  │ │ │ └── [email protected] deduped
  │ │ └── [email protected] deduped
  │ ├─┬ @mui/[email protected]
  │ │ └── [email protected] deduped
  │ ├── [email protected] deduped
  │ ├─┬ [email protected]
  │ │ ├── [email protected] deduped
  │ │ └── [email protected] deduped
  │ └── [email protected] deduped
  ├── [email protected] deduped
  ├─┬ [email protected]
  │ ├── [email protected] deduped
  │ ├─┬ [email protected]
  │ │ └── [email protected] deduped
  │ └── [email protected] deduped
  └── [email protected] deduped

Ongoing documentation of this issue here.

Expected behavior 🤔

MUI's use of React hooks shouldn't be causing a hooks error in an app consuming a component library based off of MUI.

Steps to reproduce 🕹

Steps:

1. Create a Storybook/TS/Sass component library following this specification.
2. Import that library into a vanilla create-react-app typescript application.
3. Import a component that builds on the MUI Button component.

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.3.1
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: Not Found
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 100.0.4896.88
    Edge: Not Found
    Firefox: 99.0.1
    Safari: 15.4
  npmPackages:
    react: ^17.0.1 => 17.0.2 
    react-dom: ^17.0.1 => 17.0.2 
    typescript: ^4.6.3 => 4.6.3 

[michaldudak]

How do you require your library exactly? Do you npm pack it and specify the path to the .tar.gz in your package.json? If not, you may have multiple instances of React (possibly in the same version) running.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[OneTuskedMario]

Did you ever figure out how to solve this? @sashafklein

[sashafklein]

@OneTuskedMario - Yes, at least to my satisfaction. Documented on Stack Overflow.