发生热模块重新加载时，故事书故事消失

Posted 2023-02-19

【中文标题】发生热模块重新加载时，故事书故事消失

【英文标题】：Storybook stories disappear when hot module reloading occurs

【发布时间】：2020-10-22 23:53:45

【问题描述】：

当我编辑一个组件并且发生热模块重新加载时，所有其他具有相同标题的故事都会消失。唯一还存在的就是我刚刚编辑的组件的故事。

在component1.stories.tsx中：

import * as React from 'react';

import Provider from './provider';
import Component1Component from './component1';

export const Component1 = () => 
  return(
    <Provider>
        <Component1Component />
    <Provider>
  )

export default 
  title: 'Components',
;

在component2.stories.tsx中：

import * as React from 'react';

import Provider from './provider';
import Component2Component from './component2';

export const Component2 = () => 
  return(
    <Provider>
        <Component1Component />
    <Provider>
  )

export default 
  title: 'Components',
;

所以在上面的例子中，如果我编辑 component1.tsx，那么 component2.tsx 的故事就会消失。

在我的 package.json 中

    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-info": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addon-storysource": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/react": "^5.3.19"
    "react-storybook-addon-props-combinations": "^1.1.0",

【参考方案1】：

根据这个 Github 问题评论：

https://github.com/storybookjs/storybook/issues/7493#issuecomment-514508328

故事不应有重复的标题。尝试更改标题以反映不同组件的名称。

这个问题显然在这个 PR 中得到了解决：

https://github.com/storybookjs/storybook/pull/7542