React hooks error with material-ui

[alexnofoget]

I have an error with storybook and react hooks

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:9001/vendors~main.c08119bb1baee695123a.bundle.js:298423:15)
    at Object.throwInvalidHookError (http://localhost:9001/vendors~main.c08119bb1baee695123a.bundle.js:311235:3)
    at Object.useContext (http://localhost:9001/vendors~main.c08119bb1baee695123a.bundle.js:334207:21)
    at useTheme (http://localhost:9001/vendors~main.c08119bb1baee695123a.bundle.js:185294:55)
    at http://localhost:9001/vendors~main.c08119bb1baee695123a.bundle.js:184916:91
    at Object.WithStyles [as render] (http://localhost:9001/vendors~main.c08119bb1baee695123a.bundle.js:185385:21)
    at extract (http://localhost:9001/vendors~main.c08119bb1baee695123a.bundle.js:188834:38)
    at Array.forEach (<anonymous>)
    at extract (http://localhost:9001/vendors~main.c08119bb1baee695123a.bundle.js:188825:25)
    at extract (http://localhost:9001/vendors~main.c08119bb1baee695123a.bundle.js:188830:11)

Example with the same error here https://github.com/alexnofoget/storybook-issue

[ndelangen]

Are you using react hooks somewhere in your code?

[alexnofoget]

Are you using react hooks somewhere in your code?

No, but this error doesn`t occure if I use this component without storybook

[ndelangen]

OK, I'll take a look at your repo

[ndelangen]

Investigating...

Seems the problem is with how addon-info (storybook) + withStyles (@material-ui/core/styles) interop.

[ndelangen]

This line seems to cause react to think it's not rendering a functional component, which is what hooks needs to operate.

extract(innerChildren.type.render(innerChildren.props));

[ndelangen]

Found a fix, opened a PR

[RomainGoncalves]

Hi @ndelangen , thanks for looking into this. I have the same issue here. Can we expect the PR to be merged/released soon?

Thanks

[codeglider]

@ndelangen I'm having the same issue. Do you know when this PR will be merged? Is there any work around until then? maybe lowering the react version? I tried, but didn't work.

[abrcdf1023]

Same here after upgrade to material-ui V4 everything is broken.

[PilotConway]

I just ran into this as well.

Seems the workaround for the time being is to stop using withInfo decorator until it's fixed. I think I got a few other components working by removing withStyles from the tree but can't really do that everywhere at this time so I just commented out the withInfo add decorator line in my config and am going forward with that for now.

[gormat]

I am not sure this is the best place to ask this question, but anyway, can I use makeStyles function inside class ? I got an Invalid hook call. Is there any possible way to use the function makeStyles ?

[shilman]

Yowza!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-rc.3 containing PR #6859 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shawnmclean]

I tried it and I still get the same error, my devDeps look like this:

"devDependencies": {
    "@babel/core": "^7.4.5",
    "@storybook/addon-actions": "^5.1.0-rc.3",
    "@storybook/addon-info": "^5.1.0-rc.3",
    "@storybook/addon-links": "^5.1.0-rc.3",
    "@storybook/addons": "^5.1.0-rc.3",
    "@storybook/react": "^5.1.0-rc.3",
    "@types/jest": "24.0.13",
    "@types/storybook__addon-actions": "^3.4.2",
    "@types/storybook__react": "^4.0.1",
    "awesome-typescript-loader": "^5.2.1",
    "react-docgen-typescript-loader": "^3.1.0",
    "babel-loader": "8.0.5",
    "jest": "24.7.1"
  }

[ndelangen]

@shawnmclean @DwayneSamuels could you help me reproduce?

a list of dependencies isn't enough for me to be able to reproduce unfortunately.

I was able to reproduce before using @alexnofoget repo, before, but the fact you're still experiencing an issue, suggest your issue might have a different cause.

[PilotConway]

I just tried the new code with the 5.1.1 release and I am no longer seeing the error, so this is fixed for us now.

[XanderSpecter]

I'm not sure that my problem is same as this. But I see similar error then I'm trying to run tests in cypress using storybook v. 5.3.9. But there is no errors then I run storybook alone, without tests. So this is only one issue that seems like my problem I could find. Does anyone here know anything about it?

[shilman]

@XanderSpecter share more about your setup (config + a failing test?) and somebody can help?

[XanderSpecter]

@shilman I didn't make configs in that project. So, I don't know, that configs I need to share :(

I have a story for component:

import React from 'react';

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

document.TextField = TextField;

export default { title: 'Основные компоненты|Текстовые поля/TextField', component: TextField };

export const emptyStory = () => <div className="text-field-empty-story-root"></div>;
emptyStory.story = {
    name: 'empty',
};

Now I'm importing TextField from metarial without my wrapper because I'm trying to solwe this problem thiwhout my code.

Also I have a spec for cypress that connects to storybook using this empty story and trying to render component and run tests:

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

const rootToMountSelector = '.text-field-empty-story-root';

const selectors = {
    input: '.MuiInputBase-input',
};

before(() => {
        const testURI = 'localhost:9004/iframe.html?id=основные-компоненты-текстовые-поля-textfield--empty-story';
        cy.visit(encodeURI(testURI));
        cy.get(rootToMountSelector);
    });

    afterEach(() => {
        cy.document()
            .then((doc) => {
                ReactDOM.unmountComponentAtNode(doc.querySelector(rootToMountSelector));
            });
    });

    it('При отрисовке будет содержать элемент input.', () => {
        cy.document().then((doc) => {
            ReactDOM.render(
                <doc.TextField
                    // doc={doc}
                />,
                doc.querySelector(rootToMountSelector),
            );
        });

        cy
            .get(selectors.input)
            .should('be.exist')
            .should('be.visible');
    });

If you need more information please say what configs I need to share.

And sorry about my bad English :)

[shilman]

Hmm, sorry I'm not sure. Maybe somebody else knows?

[XanderSpecter]

That scheme of tests works with another components that not using material-ui. But with material test runs, sucsessfully connects to storybook, try to render and throw same error as in topic of this issue