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

[prasanna-mswamy]

• [x] This is not a v0.x issue.
• [x] 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 |

[prasanna-mswamy]

Any leads would be helpful. Thanks in advance.

[oliviertassinari]

Sorry, we can't help.

[triffer]

Thanks for the fast response @oliviertassinari .
Just some extra information: Everything works fine in version 3.9.3, even in version 4.0.0-alpha.2 everything is working as expected. The changes in version 4.0.0-alpha.3 will cause the error. So maybe with this information it's possible to point us in some kind of direction? We tried a lot and I couldn't find any breaking changes in the migration documentation v3 to v4 that would help us.

Thanks in advance

[Akuukis]

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

[prasanna-mswamy]

@Akuukis, Thanks for the suggestion. But this didn't solve the issue.

[ryan-gray]

I have the same issue, using material-ui in a shared ui component library. The issue for me was with using npm link (so that the main app can access the library directly through a symlink). When including the built and published library, only the dist folder is present in the module under node_modules. The problem was that it symlinks the entire project, not just dist. It could be that the main app is then seeing two installations of react, since the npm linked project includes the node_modules directory... I have not yet found a good solution to get around this...

[graniczny]

Having same issue, haven't found a solution yet

[eps1lon]

This is likely an issue with your build setup bundling multiple versions of react. See https://github.com/facebook/react/issues/13991 for for an in-depth discussion and possible workarounds.

[gknapp]

I made the mistake of upgrading react and forgot to upgrade react-dom to the same version. It produced this error.

[kennethrivera]

I have the same issue.

Here's my setup:
/app/ < create-react-app, running on react/react-dom 16.10.2
/admin/ < create-react-app, running on react/react-dom 16.10.2
/sharedcomponents/ < very lean small library with shared components, running on react/react-dom 16.10.2, "@material-ui/core": "3.9.2"

when I updated on the package.json of /sharedcomponents/ to "@material-ui/core": "4.5.0" (but tested on all 4.x.x) I start the get the error on the /app/ and /admin/ apps.

I double checked all versions of react/react-dom and they all match. Issue is trigger by updating to the @material-ui 4.x.x version.

If useful I can try to create a small sample to reproduce the error.

--

Here's the /sharedcomponents/ webpack.config.js

var path = require('path');

https: module.exports = {
    mode: 'production', // "production" | "development" | "none"
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        library: 'nispero',
        libraryTarget: 'commonjs2',
        filename: 'index.js',
        //umdNamedDefine: true,
        //        libraryTarget: 'commonjs2', // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
    },
    module: {
        rules: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                exclude: /(node_modules|bower_components|build)/,
            },
        ],
    },
    resolve: {
        alias: {
            react: path.resolve(__dirname, './node_modules/react'),
            'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
            '@material-ui/styles': path.resolve(__dirname, './node_modules/@material-ui/styles'),
            '@material-ui/core': path.resolve(__dirname, './node_modules/@material-ui/core'),
        },
    },
    externals: {
        // Don't bundle react or react-dom
        react: {
            commonjs: 'react',
            commonjs2: 'react',
            amd: 'React',
            root: 'React',
        },
        'react-dom': {
            commonjs: 'react-dom',
            commonjs2: 'react-dom',
            amd: 'ReactDOM',
            root: 'ReactDOM',
        },
        moment: 'moment',
        '../moment': 'moment',
        //'@material-ui/core': 'MaterialUI',
        '@material-ui': {
            root: 'MaterialUI',
            commonjs2: 'material-ui',
            commonjs: 'material-ui',
            amd: 'material-ui',
        },
    },
};

[kennethrivera]

@prasanna-mswamy, @gknapp , @ryan-gray not sure if you have found another solution but, I keep digging into this and it looks when we are linking the /sharedcomponents/ as part of the npm link, so if you build the library and then delete the /sharedcomponents/node_modules/ folder it won't find 2 copies of react. I found this while reading another thread there's a @dmart914 post about this specific.

There's another workaround which is using Yarn resolutions

  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

I haven't tried because i'm using NPM, I was looking for a good reason to switch to yarn and it looks I found it. I will test and write on this thread the result.

Edit: I tried with Yarn Resolutions and it works perfectly.

[gknapp]

@kennethrivera I upgraded react-dom to match the version of react I upgraded to and it resolved the error. Sounds like it hasn't solved the issue for others. I use npm for the project that encountered this issue.

[hwatersiv]

I'm getting the same original error. and have done all the suggestions in here. But the issue only occurs on the <Tooltip /> component. As soon as I comment it out it works perfectly. I have attempted to replicate it in codesandbox but also can;t replicate.

im on react and react-dom @ 16.11.0
@material-ui/core @4.5.1

[gknapp]

I'm on

@material-ui/core 4.4.2
react and react-dom 16.9.0

[hwatersiv]

components-base.zip

The attached is a copy of our private package. the package src and the demo app are found in here too. The issue exists currently in this package

[sreeramofficial]

Moving react to webpack externals worked for me. Seems to be more of a workaround though.

[dclark27]

I am still having an issue with this.

[jkhaui]

I am also having major issues trying to include material-ui with create-react-library. Use-case is simple, same as OPs: to create a library of resusable components with material-ui as the base, but this issue makes it impossible

[MohamadrezaGolabshekar]

I had this issue and I solved it by delete react and react-dom package from node_modules in my component library project

[amitkumarchauhan1987]

• [x] This is not a v0.x issue.
• [x] 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.

15832

facebook/react#15628

16452

facebook/react#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

My Question has nothing to do with hook realted issue but in fact its related to sharing theme object...My component library is not picking up the theme provided from consumer App...Any help would be appreciated

[shaninizan]

In your library's package.json, move react and react-dom out of dependencies and into peerDependencies.