Storybook启动报错Cannot read properties of undefined (reading 'type')求助

结合你用单例模式实现通知组件的场景，以下是常见故障原因和对应的解决方法：

1. 单例实例未提前初始化 #

如果toastCreator的单例实例在Storybook渲染组件时还未创建，调用其方法时会访问undefined的属性。

• 解决：在stories.jsx开头主动初始化单例，比如调用toastCreator.getInstance()，确保实例在组件渲染前已生成。

2. 依赖的DOM容器不存在 #

单例通知组件通常需要挂载到特定DOM容器（比如body下的节点），Storybook沙箱环境中可能未自动创建该容器，导致实例初始化失败。

• 解决：在stories.jsx中提前创建所需容器，或者修改toastCreator.js的初始化逻辑，当容器不存在时自动创建：

  class ToastCreator {
    constructor() {
      this.container = document.getElementById('toast-container') || document.createElement('div');
      if (!document.getElementById('toast-container')) {
        this.container.id = 'toast-container';
        document.body.appendChild(this.container);
      }
    }
  }
  

3. 调用通知方法时参数缺失type #

如果在stories中调用通知组件时，传入的配置对象未包含type字段，内部逻辑读取config.type就会触发错误。

• 解决：检查stories中的调用代码，确保传入完整配置（比如{ type: 'success', message: '操作成功' }）；或者在toastCreator.js的方法中添加参数默认值：

  show(config) {
    const { type = 'info', message = '' } = config;
    // 后续渲染逻辑
  }
  

4. 单例实现逻辑错误 #

如果getInstance()方法未正确返回实例（比如初始化时出现异常），后续调用其方法就会访问undefined。

• 解决：检查toastCreator.js的单例代码，确保实例创建逻辑无错误：

  class ToastCreator {
    static instance = null;
  
    static getInstance() {
      if (!ToastCreator.instance) {
        ToastCreator.instance = new ToastCreator();
      }
      return ToastCreator.instance;
    }
  
    // 其他方法
  }
  

调试建议 #

• 在toastCreator.js的getInstance()和show()方法中添加console.log，打印实例和传入的配置参数，确认是否存在undefined的情况；
• 在Storybook的stories代码中，调用通知方法前先打印单例实例，确认实例已正常生成。

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