Storybook V7 Beta启动后Viewport及其他选项消失问题求助

问题详情 #

搭建Storybook环境后整体运行基本正常，但构建/启动完成后，Viewport标签及侧边栏其他选项会消失。已尝试移除Storybook环境中的功能进行修复，至今毫无进展。

相关配置 #

• storybook/preview.js：已清空所有内容
• storybook/main.js 配置代码：

module.exports = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions'
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {}
  },
  docs: {
    docsPage: true
  }
};

操作步骤 #

• 执行命令 npm run storybook
• 打开新浏览器标签页查看结果

界面对比 #

构建中界面 #

构建完成后界面 #

排查与修复方案 #

1. 显式启用Addon Essentials功能
   @storybook/addon-essentials 默认包含Viewport、Actions等工具，但可能被隐性配置覆盖。修改main.js的addons部分，显式指定启用的工具：

addons: [
  '@storybook/addon-links',
  {
    name: '@storybook/addon-essentials',
    options: {
      viewport: true,
      actions: true,
      controls: true,
      docs: true
    }
  },
  '@storybook/addon-interactions'
],

2. 清理缓存重新构建
   执行以下命令清除Storybook缓存，避免旧配置残留：

npx storybook clean
npm run storybook

3. 检查版本兼容性
   确认@storybook/nextjs版本与项目中Next.js版本匹配。查看package.json中的版本号，若存在差异，升级或降级至兼容版本。

4. 恢复preview.js基础配置
   尝试添加基础视口配置到storybook/preview.js，确保视口功能正常加载：

export const parameters = {
  viewport: {
    viewports: {
      ...require('@storybook/addon-viewport').defaultViewports,
    },
  },
};

5. 排查浏览器扩展干扰
   部分浏览器扩展（如广告拦截器、脚本管理器）可能干扰Storybook UI渲染，尝试在无痕模式下打开页面验证是否恢复正常。

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