Question

我所有的钩子都导致无效的钩子调用错误，这是在使用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>
  )
}

Answer 1

我的解决方案：

我已经从package.json中删除了所有 storybook 依赖项；
我已经删除了yarn.lock文件和node_modules文件夹；
我已将package.json上的react和react-dom版本锁定为 16.13.1;
我在package.json中添加了以下解决方案：

  "resolutions": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }

我从我的workspaces.nohoist中删除了react依赖项 package.json;
我已经使用npx sb init从零开始安装了Storybook。

引用开发者的话

@ eric-burel我们将在6.1中修改大量此类内容，例如＃11628，并删除也会引起大量依赖敏感性的webpack DLL

了解更多here

Answer 2

对于那些带着NextJS v10和Storybook v6来到这里的人：故事书不支持react v17，您可以通过运行以下命令检查不匹配的版本： npm ls react-dom和npm ls react。

Storybook最近发布了一个可解决此问题的测试版，您可以通过以下方式安装它： npx sb upgrade --prerelease

更多信息和此处的对话：https://github.com/storybookjs/storybook/issues/12408

反应无效的挂钩调用错误和故事书6

2 个答案: