Publish & import components that include MUI

[bluehipy]

Given an application built with MUI, one wants to reuse some of the components and views in another application.
The first app gets linked locally with npm link
The second application is linking the first app in with npm link firstapp
The second app can't use the components from the first app that are including MUI components. Something related the hooks not being used right is popping out.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The application importing custom published components that include MUI , crashes with:

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.

However, the components that are not including MUI are working just fine.

Sample code is available here: https://github.com/bluehipy/code4fun/tree/master/mui-test

Expected Behavior 🤔

The imported components that contain some MUI components should render correctly without triggering the hook error.

Steps to Reproduce 🕹

1. create react app test_a
2. create TestComponent wrapping MUI Button
3. compile using babel to ./dist/TestComponent.js
4. execute npm link in test_a root path
5. create react app test_b
6. execute npm link test_a
7. in App.js import TestComponent from 'test_a/dist/TestComponent.js
8. render a <TestComponent />

https://github.com/bluehipy/code4fun/tree/master/mui-test

Context 🔦

I am trying to reuse components from an application into a another application.

Your Environment 🌎

`npx @mui/envinfo`

I am using Chrome.

  npx: installed 2 in 4.761s

  System:
    OS: Linux 5.8 Ubuntu 20.04.1 LTS (Focal Fossa)
  Binaries:
    Node: 10.19.0 - /usr/bin/node
    Yarn: Not Found
    npm: 6.14.4 - /usr/bin/npm
  Browsers:
    Chrome: 93.0.4577.63
    Firefox: 92.0
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.48 
    @mui/material: ^5.0.1 => 5.0.1 
    @mui/private-theming:  5.0.1 
    @mui/styled-engine:  5.0.1 
    @mui/system:  5.0.1 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.1 
    @types/react:  17.0.24 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 

[siriwatknp]

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

Have you tried all the suggestion from the error? I don't think that the error comes from mui but where you call your component.

[bluehipy]

I have read the error.
I am not breaking the hook rules.
I am using exactly the same versions of all dependencies including React and Reactt Dom.
I dont have more React apps in the same time.

Also , the same flow with a component that is rendering a simple dom doesn't have the issue.

I might be wrong at some level but is not that obvious or direct.

Thank you, @siriwatknp

[eps1lon]

Thanks for the feedback-

npm link will cause multiple versions of React to be included if both the current and linked repositories have React installed.

Closing in favor of facebook/create-react-app#3883