React invalid hook call error and storybook 6

user_14470805 0
Viewed 1458

All of my hooks cause the Invalid hook call error, this occurred after installing storybook using npx sb init

import React from 'react'
import { useSectionsQuery } from "../../graphql/generated";
          
export const Home: React.FC = () => {
  const { data } = useSectionsQuery();
            
  return (
    <div className="bg-gray-200">
                  
    
      <div style={{ backgroundColor: "#4267B2" }} className="grid grid-rows-1">
        <div className="flex justify-center">
          {data?.sectionMany.map((section: any) => {
            return <Card {...section} />;
          })}
        </div>
      </div>
    </div>
  )
}
storybook react-hooks reactjs
2 Answers

The solution for me:

  1. I've removed all storybook dependencies from my package.json;
  2. I've deleted the yarn.lock file and node_modules folder;
  3. I've locked react and react-dom versions on my package.json to 16.13.1;
  4. I've added the following resolutions to my package.json:
  "resolutions": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
  1. I've removed react dependencies from workspaces.nohoist on my package.json;
  2. I've installed Storybook from zero using npx sb init.

Quote from the dev's

@eric-burel we're revamping a bunch of this stuff in 6.1, like #11628 and also removing the webpack DLLs which also cause lots of dependency sensitivity

Read more here

user_144708050

For those of you coming here with a NextJS v10 and Storybook v6: Storybook doesn't support react v17, you can check the mismatched versions by running: npm ls react-dom and npm ls react.

Storybook released a beta recently that fixes this, you can install this by: npx sb upgrade --prerelease

More info and conversation here: https://github.com/storybookjs/storybook/issues/12408

user_44306400
Related