Unable to use a shared component library that uses material-ui

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

To be able to use material ui in a shared component library built with webpack and for the components to be usable in consumer apps of the shared library.

Current Behavior 😯

We started getting the below error when running the consumer apps. The components in the library itself are available for testing and storybook without any issues. But we get the below error in the consumer app when a component built with material-ui is used.

I know that this issue might be linked to a known react issue, I have tried the changes suggested in the following issues. But none of the directions have helped solve the issue.

https://github.com/mui-org/material-ui/issues/15832 https://github.com/facebook/react/issues/15628 https://github.com/mui-org/material-ui/issues/16452 https://github.com/facebook/react/issues/13991

VM371 webpack-react-issue.js:6076 Uncaught Invariant Violation: 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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at invariant (webpack:///../webpack-react/dist/webpack-react-issue.js?:6076:489)
    at resolveDispatcher (webpack:///../webpack-react/dist/webpack-react-issue.js?:6410:743)
    at Object.useContext (webpack:///../webpack-react/dist/webpack-react-issue.js?:6410:1281)
    at useTheme (webpack:///../webpack-react/dist/webpack-react-issue.js?:1298:845)
    at eval (webpack:///../webpack-react/dist/webpack-react-issue.js?:1268:1130)
    at SimpleButton (webpack:///../webpack-react/dist/webpack-react-issue.js?:6706:1161)
    at ProxyFacade (webpack:///./node_modules/react-hot-loader/dist/react-hot-loader.development.js?:829:20)
    at renderWithHooks (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:2480:157)
    at mountIndeterminateComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:2743:883)
    at beginWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:2897:144)
invariant @ VM371 webpack-react-issue.js:6076
resolveDispatcher @ VM371 webpack-react-issue.js:6410
useContext @ VM371 webpack-react-issue.js:6410
useTheme @ VM371 webpack-react-issue.js:1298
(anonymous) @ VM371 webpack-react-issue.js:1268
SimpleButton @ VM371 webpack-react-issue.js:6706
SimpleButton @ react-hot-loader.development.js:829
renderWithHooks @ react-dom.development.js:2480
mountIndeterminateComponent @ react-dom.development.js:2743
beginWork @ react-dom.development.js:2897
performUnitOfWork @ react-dom.development.js:3574
workLoop @ react-dom.development.js:3581
callCallback @ react-dom.development.js:66
invokeGuardedCallbackDev @ react-dom.development.js:86
invokeGuardedCallback @ react-dom.development.js:102
replayUnitOfWork @ react-dom.development.js:3442
renderRoot @ react-dom.development.js:3603
performWorkOnRoot @ react-dom.development.js:3785
performWork @ react-dom.development.js:3767
performSyncWork @ react-dom.development.js:3765
requestWork @ react-dom.development.js:3741
scheduleWork @ react-dom.development.js:3687
scheduleRootUpdate @ react-dom.development.js:3823
updateContainerAtExpirationTime @ react-dom.development.js:3824
updateContainer @ react-dom.development.js:3824
ReactRoot.render @ react-dom.development.js:3854
(anonymous) @ react-dom.development.js:3867
unbatchedUpdates @ react-dom.development.js:3811
legacyRenderSubtreeIntoContainer @ react-dom.development.js:3867
render @ react-dom.development.js:3870
(anonymous) @ index.jsx:14
./src/index.jsx @ main.js:1528
__webpack_require__ @ main.js:727
fn @ main.js:101
(anonymous) @ client:3
0 @ main.js:1539
__webpack_require__ @ main.js:727
(anonymous) @ main.js:794
(anonymous) @ main.js:797
Show 9 more frames
react-dom.development.js:3237 The above error occurred in the <SimpleButton> component:
    in SimpleButton (created by Welcome)
    in Welcome (created by HotExportedWelcome)
    in AppContainer (created by HotExportedWelcome)
    in HotExportedWelcome

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

Steps to Reproduce 🕹

Unable to reproduce this in codesandbox. But created a repository with the example instead. https://github.com/traversals-analytics-and-intelligence/material-ui-react-hooks-issue

Context 🔦

We have a shared component library that uses material-ui to build the components. I have added a simpler version of the library and an example consumer of the library. With this, we were able to add components needed in the library and use them in the consumer apps.

Your Environment 🌎

Tech	Version
Material-UI	v4.3.0
React	v16.8.6
Browser	Chrome

[oliviertassinari]

Sorry, we can’t help.

[Akuukis]

Deleting every node_modules folder in my workspaces and root folder, then installing everything afresh solved this issue for me. @prasanna-mswamy