Storybook 7中使用storiesOf报错，组件文档索引失败如何解决？

问题原因 #

Storybook 7默认启用了下一代的storyStoreV7存储机制，该机制不再支持旧版的storiesOf语法，因此当代码中使用storiesOf定义故事时，会触发索引错误，比如你遇到的：

意外使用storiesOf：C:/Users/imran/react-package/src/stories/Requirements.stories.js（第6行，第16列）

你的现有代码示例：

import React from "react";
import { storiesOf } from "@storybook/react";

import { Requirements } from "../components/Requirements";

const stories = storiesOf('App Test', module);

stories.add('App', () => {
    return (<Requirements />)
});

解决方案 #

1. 迁移到CSF（Component Story Format）语法（推荐） #

这是Storybook 7官方推荐的写法，更简洁且兼容新机制，修改后的代码如下：

import React from "react";
import { Requirements } from "../components/Requirements";

export default {
  title: 'App Test',
  component: Requirements,
};

export const App = () => <Requirements />;

2. 临时禁用storyStoreV7（不推荐长期使用） #

如果暂时不想迁移代码，可以在.storybook/main.js（或main.ts）中关闭storyStoreV7：

module.exports = {
  // 其他配置...
  features: {
    storyStoreV7: false,
  },
};

注意：禁用新存储机制会失去Storybook 7的部分性能优化和新特性，建议尽快完成语法迁移。

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