React组件结合Storybook使用useState时出现TypeError问题求助

问题 #

新项目搭建Storybook后，编写了一个含useState的React组件Foo及对应Story配置，构建无报错，但查看Story时抛出错误：

TypeError
Cannot read properties of null (reading 'useState')
Call Stack
useState
   vendors-node_modules_react_index_js.iframe.bundle.js:1632:21
Foo
  components-Foo-Foo-stories.iframe.bundle.js:158:72

移除useState后组件可正常展示，Storybook命令行无报错。
环境版本：React 18.2.0、Typescript 5.1.3、Storybook 7.0.20

组件代码 #

import React, { useState } from "react";

import './foo.scss';

interface IProps {
  text?: string;
};

export default function Foo(props: IProps) {
  const {text} = props;
  const [bar, setBar] = useState(0);

  return (
    <div className="foo">
      <div className="foo__text">{ text }</div>
      <button
        className="foo__button"
        type="button" 
        onClick={ () => setBar(bar + 1) }>
          { bar }
      </button>
    </div>
  )
};

Foo.defaultProps = {
  text: 'hello world',
};

Story代码 #

import React from "react";
import type { Meta, StoryObj } from "@storybook/react";

import Foo from "./Foo";

const meta: Meta<typeof Foo> = {
  title: 'Foo',
  component: Foo,
};

export default meta;

type Story = StoryObj<typeof Foo>;

export const DefaultStory: Story = {
  args: {
    text: 'I am text',
  },
};

可能的原因与解决办法 #

1. React被重复加载 #

这是该错误最常见的诱因——项目中存在多份React实例，导致useState无法获取正确的React上下文：

• 检查根目录package.json，确保react和react-dom在dependencies中，而非devDependencies
• 清理依赖后重新安装：

rm -rf node_modules package-lock.json yarn.lock
npm install

• 若使用monorepo，在.storybook/main.ts中添加React别名，强制使用同一版本：

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  // 其他配置...
  viteFinal: async (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve?.alias,
          react: require.resolve('react'),
          'react-dom': require.resolve('react-dom'),
        },
      },
    };
  },
};

export default config;

2. Storybook框架配置错误 #

确认Storybook的React框架配置正确，避免版本不兼容：

• 检查.storybook/main.ts的framework字段是否匹配你的构建工具，比如：

// .storybook/main.ts
export default {
  framework: '@storybook/react-vite',
  // 其他配置...
};

• 若手动修改过配置，执行npx storybook@latest upgrade重新同步配置

3. TypeScript配置冲突 #

确保TS配置与React、Storybook兼容：

• 修改tsconfig.json的jsx字段为React 17+推荐的react-jsx：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    // 其他配置...
  }
}

4. 依赖版本不匹配 #

尝试升级Storybook到最新兼容版本，或调整React版本适配：

• 执行npx storybook@latest upgrade --prerelease升级到最新稳定版
• 确认@storybook/react版本与Storybook核心版本完全一致

内容的提问来源于stack exchange，提问作者jszpila