Cannot use linked lib using material-ui

[kizivat]

When I create a component library which is using MUI and reuse a component from it in an React app I get Invalid hook call. error in <WithStyles(ForwardRef(Fab))> (when using FAB in the component for example, but it's the same case with any other MUI component).

This happens only when I add the dependency on the component lib via npm/yarn link.

When I install such a library from the npm registry, it works as expected.

• 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 🤔

I can use a component library which is using MUI components with yarn link.

Current Behavior 😯

When I do, I get the following error:

react.development.js:85 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 (http://localhost:3000/static/js/0.chunk.js:69263:19)
    at resolveDispatcher (http://localhost:3000/static/js/0.chunk.js:70648:32)
    at Object.useContext (http://localhost:3000/static/js/0.chunk.js:70653:24)
    at useTheme (http://localhost:3000/static/js/0.chunk.js:35403:55)
    at http://localhost:3000/static/js/0.chunk.js:35025:91
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:35494:21)
    at renderWithHooks (http://localhost:3000/static/js/0.chunk.js:90904:22)
    at updateForwardRef (http://localhost:3000/static/js/0.chunk.js:92468:24)
    at beginWork (http://localhost:3000/static/js/0.chunk.js:93742:20)
    at performUnitOfWork (http://localhost:3000/static/js/0.chunk.js:97734:16)
    at workLoop (http://localhost:3000/static/js/0.chunk.js:97775:28)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:77602:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:77651:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:77705:35)
    at replayUnitOfWork (http://localhost:3000/static/js/0.chunk.js:96958:9)
    at renderRoot (http://localhost:3000/static/js/0.chunk.js:97888:17)
    at performWorkOnRoot (http://localhost:3000/static/js/0.chunk.js:98812:11)
    at performWork (http://localhost:3000/static/js/0.chunk.js:98722:11)
    at performSyncWork (http://localhost:3000/static/js/0.chunk.js:98696:7)
    at requestWork (http://localhost:3000/static/js/0.chunk.js:98551:9)
    at scheduleWork (http://localhost:3000/static/js/0.chunk.js:98364:9)
    at scheduleRootUpdate (http://localhost:3000/static/js/0.chunk.js:99059:7)
    at updateContainerAtExpirationTime (http://localhost:3000/static/js/0.chunk.js:99085:14)
    at updateContainer (http://localhost:3000/static/js/0.chunk.js:99153:14)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (http://localhost:3000/static/js/0.chunk.js:99466:7)
    at http://localhost:3000/static/js/0.chunk.js:99618:18
    at unbatchedUpdates (http://localhost:3000/static/js/0.chunk.js:98941:14)
    at legacyRenderSubtreeIntoContainer (http://localhost:3000/static/js/0.chunk.js:99614:9)
    at Object.render (http://localhost:3000/static/js/0.chunk.js:99689:16)
    at Module../src/index.tsx (http://localhost:3000/static/js/main.chunk.js:339:50)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:782:30)
    at fn (http://localhost:3000/static/js/bundle.js:150:20)
    at Object.0 (http://localhost:3000/static/js/main.chunk.js:469:18)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:782:30)
    at checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23)
    at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/bundle.js:33:19)
    at http://localhost:3000/static/js/main.chunk.js:1:57
invariant @ react.development.js:85
resolveDispatcher @ react.development.js:1470
useContext @ react.development.js:1475
useTheme @ useTheme.js:4
(anonymous) @ makeStyles.js:223
WithStyles @ withStyles.js:48
renderWithHooks @ react-dom.development.js:13449
updateForwardRef @ react-dom.development.js:15013
beginWork @ react-dom.development.js:16287
performUnitOfWork @ react-dom.development.js:20279
workLoop @ react-dom.development.js:20320
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
replayUnitOfWork @ react-dom.development.js:19503
renderRoot @ react-dom.development.js:20433
performWorkOnRoot @ react-dom.development.js:21357
performWork @ react-dom.development.js:21267
performSyncWork @ react-dom.development.js:21241
requestWork @ react-dom.development.js:21096
scheduleWork @ react-dom.development.js:20909
scheduleRootUpdate @ react-dom.development.js:21604
updateContainerAtExpirationTime @ react-dom.development.js:21630
updateContainer @ react-dom.development.js:21698
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:22011
(anonymous) @ react-dom.development.js:22163
unbatchedUpdates @ react-dom.development.js:21486
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22159
render @ react-dom.development.js:22234
./src/index.tsx @ index.tsx:7
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ serviceWorker.ts:143
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 7 more frames
index.js:1375 The above error occurred in the <WithStyles(ForwardRef(Fab))> component:
    in WithStyles(ForwardRef(Fab))
    in AddButton (at App.tsx:22)
    in header (at App.tsx:9)
    in div (at App.tsx:8)
    in App (at src/index.tsx:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries

Steps to Reproduce 🕹

Link:

1. create component library with a MUI component (let's call it comp-lib
2. npm link
3. create react app my-app
4. cd my-app && npm link comp-lib
5. yarn start

Context 🔦

See above description

Your Environment 🌎

Tech	Version
Material-UI	v4.2.0
React	16.8.6
Browser	Chrome 75
TypeScript	3.5.3
etc.

[oliviertassinari]

Does #14760 help? Could it be a duplicate?

[eps1lon]

That's more of an issue with linking, node_modules resolution and react. Nothing specific to this repository.

See facebook/react#13991

[kizivat]

You're right. Just an info - updating resolve.modules helped (from comment on #14760):

-modules: ['node_modules'].concat(
+modules: [path.resolve('node_modules'), 'node_modules'].concat(