升级Storybook至6.5.16后Stories无法显示求助

API 探路者

2026-7-17

问题排查与解决方案

核心问题分析

你遇到的侧边栏显示故事但点击无响应的问题，主要由以下几个冲突点导致：

StoryStore V7 与手动加载逻辑的兼容性问题
过时插件（knobs、withInfo）与新版本Storybook的冲突
自定义Webpack配置的样式处理冲突
注：index.js.map的404警告与当前问题无关，是构建产物的source map缺失，可后续单独处理。

具体修复步骤

1. 移除StoryStore V7与手动加载的冲突

StoryStore V7采用自动扫描机制，无需手动调用configure加载stories：

preview.js：删除手动加载逻辑，修改后如下：

import { DocsContainer, DocsPage } from '@storybook/addon-docs';

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
});

const storyWrapper = (story) => (
  <div className="storywrapper" style={{ margin: 35 }}>
    {story()}
  </div>
);

addDecorator(storyWrapper);

删掉loadStories函数和configure(loadStories, module)，Storybook会自动扫描main.ts中配置的../src/**/*.tsx路径加载stories。

2. 替换过时插件

@storybook/addon-knobs已被弃用，改用官方推荐的@storybook/addon-controls：
1. 卸载knobs：npm uninstall @storybook/addon-knobs
2. 安装controls：npm install @storybook/addon-controls --save-dev
3. 修改main.ts的addons数组：
```
addons: [
  "@storybook/addon-actions",
  "@storybook/addon-controls", // 替换knobs
  "@storybook/addon-essentials",
  "@storybook/addon-viewport",
],
```
withInfo装饰器已合并到addon-essentials中，直接移除addDecorator(withInfo(...))，如需配置文档参数，可通过addParameters设置。

3. 修复Webpack样式配置冲突

自定义添加的MiniCssExtractPlugin会与Storybook自带的样式处理逻辑冲突，导致组件无法正常渲染：

main.ts：删除Webpack配置中关于MiniCssExtractPlugin的所有代码，修改后webpackFinal如下：

webpackFinal: async (config: any) => {   
  if (config.resolve?.alias) {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@style-variables": path.resolve(__dirname, "../src/styles/variables"),
    };
  }

  if (config.module?.rules) {
    config.module.rules.push({
      test: /\.(sa|sc|c)ss$/,
      use: [
        "css-loader",
        {
          loader: "sass-loader",
          options: {
            implementation: require("sass"),
            sassOptions: {
              includePaths: [
                path.resolve(__dirname, "../node_modules"), // 修正路径，从.storybook回退到项目根目录的node_modules
              ],
            },
          },
        },
      ],
    });
  }
  return config;
},

移除MiniCssExtractPlugin的引入和插件添加，同时修正sass的includePaths路径，避免多级回退导致找不到依赖。

4. 更新示例Story代码（适配controls）

将原knobs的用法改为controls的args模式：

export default {
  title: 'Selector',
  argTypes: {
    isDisabled: { control: 'boolean', defaultValue: false }, // 配置controls参数
  },
};

export const Default = ({ isDisabled }) => (
  <Component
    isDisabled={isDisabled}
    items={SELECTOR_ITEMS}
    selectedItem={SELECTOR_ITEMS[0]}
  />
);

验证步骤

删除项目根目录下的node_modules、package-lock.json（或yarn.lock）
重新执行npm install（或yarn install）
启动Storybook：npm run storybook

此时侧边栏的故事点击后应该能正常渲染组件。

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