Material-ui: Error: Invalid hook call using create-react-library + MUI

[mespeche]

Hello,

I've migrate from v3 to v4 on a create-react-library project. This project is a dependencie on others project to share components. When I want to display a material-ui component, i have an Error: Invalid hook call.

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

Current Behavior 😯

Instead of displaying my component properly, my app return an Error: Invalid hook call on the ReactDOM.render.

Expected Behavior 🤔

I want to view my component working 😄

Steps to Reproduce 🕹

Steps:

1. Use create-react-library to create a new project
2. Add material-ui v4 dependencie
3. For this example, is not necessary to code in the src directory. So, in the example directory, write the code bellow :

Context 🔦

THIS CODE CRASH...

In the example/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TextField from '@material-ui/core/TextField';

const TextFieldComponent = props => {
  return <TextField {...props} />;
};

export default TextFieldComponent;

ReactDOM.render(<TextFieldComponent />, document.getElementById('root'));

THE ERROR

THIS CODE WORKS...

In the example/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

const TextFieldComponent = props => {
  return <div {...props}>Without MUI v4</div>;
};

export default TextFieldComponent;

ReactDOM.render(<TextFieldComponent />, document.getElementById('root'));

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.0.0 |
| React | 16.12.0 |
| React DOM | 16.12.0 |

Thanks a lot for your help ! 👍

[oliviertassinari]

@mespeche Do you have a reproduction?

[mespeche]

@mespeche Do you have a reproduction?

It's difficult by code sharing via CodeSandox but i can share you this archive :
components-debug.zip

ℹ️ Without the rollup.config.js commonjs configuration, i had a ForwardRef error.

Thanks ;-)

[oliviertassinari]

@mespeche Ok thanks, you likely have an issue with how you have set up our env. We would need more information on what's wrong is going on. We don't have time to debug your project configuration.

[lynnSlalom]

@mespeche I have the same problem. Did you ever figure out how to fix it?

[mespeche]

@lynnSlalom Unfortunately I have not found yet. I posted my bug on Stackoverflow hoping to have a little more support than here...

https://stackoverflow.com/questions/58978237/material-ui-error-invalid-hook-call-using-create-react-library-mui

[oliviertassinari]

It's very likely not specific to Material-UI. I would expect it to be reproducible with a third party library that use hooks and esm.

[mespeche]

@oliviertassinari @lynnSlalom I've find a solution but i dont understand the real reason and what is the mistake :

Go to yourProject/node_modules/react and execute : yarn link
Go to yourProject/example and execute : yarn link react

And it works !

But in my root project (who uses my bugged project), i can't do this thing...

Have you got an idea ?

[oliviertassinari]

So duplicate of React?

[mespeche]

My ./package.json file has :

"peerDependencies": {
    "prop-types": "^15.6.2",
    "react": "^15.0.0 || ^16.0.0",
    "react-dom": "^15.0.0 || ^16.0.0"
},
"devDependencies": {
    "@material-ui/core": "^4.0.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    ...
}

and my example/package.json file has :

"dependencies": {
    "my-components": "link:..",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    ...
  },

How to use only one React version whereas in my example it's necessary (in my root project too) ?

[rally25rs]

For me, doing ES6 imports like

import TextField from '@material-ui/core/TextField';

works fine, but if I try to import like:

import {TextField} from '@material-ui/core';

then I get this same invalid hook error.

• @material-ui/[email protected]
• [email protected]

[mespeche]

I have found the solution !
Remove react & react-dom from your create-react-library package.json

Thanks for your help ;)

[ralberts]

@mespeche Thank you! Saved me tons of time!

[bayaraajr]

@mespeche I have removed react and react-dom. But still getting the error. Do you have any other suggestion ?