Storybook加载新增TypeScript Props类型失效，需重启问题求助

启动Storybook后，修改组件的TypeScript Props（比如给ButtonProps新增height属性及注释），Storybook无法实时同步这些变更，必须重启服务才能生效。以下是相关配置和代码：

现有配置及代码 #

main.js 配置 #

module.exports = {
  stories: ["../**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
    "@storybook/addon-a11y"
  ],
  typescript: {
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false
      }
    }
  },
  staticDirs: ["../src/assets"],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5"
  },
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: require.resolve("babel-loader"),
          options: {
            presets: [
              require("@babel/preset-typescript").default,
              [require("@babel/preset-react").default, { runtime: "automatic" }],
              // @ts-ignore
              require("@babel/preset-env").default
            ]
          }
        }
      ]
    });

    config.resolve.extensions.push(".ts", ".tsx");

    // config.module.rules.push({
    //   test: /\.mjs$/,
    //   include: /node_modules/,
    //   type: "javascript/auto"
    // });

    // config.resolve.extensions.push(".mjs");

    return config;
  }
};

ButtonProps 类型定义 #

export type ButtonProps= {
  width: string;
  /** Some comments */
  height: string;    // 该属性是启动Storybook后新增的
}

解决方案 #

• 开启react-docgen-typescript的监听模式
  在main.js的reactDocgenTypescriptOptions里添加watchMode: true，让类型解析器主动监听文件变更：

  typescript: {
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      watchMode: true, // 新增配置
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false
      }
    }
  },
  

• 让Webpack监听类型文件
  在webpackFinal中添加对.d.ts文件的处理规则，确保类型文件变更能触发热更新：

  webpackFinal: (config) => {
    // 保留原有规则...
  
    // 新增：处理.d.ts文件
    config.module.rules.push({
      test: /\.d\.ts$/,
      exclude: /node_modules/,
      use: ['ts-loader'],
    });
  
    // 把.d.ts加入扩展名解析列表
    config.resolve.extensions.push(".d.ts");
  
    return config;
  }
  

• 手动触发热更新
  如果配置调整后仍不生效，可以修改对应的story文件（比如加个空格再保存），触发Storybook的热更新流程，此时新Props会被重新加载。

• 升级依赖版本
  确保@storybook/react、react-docgen-typescript以及Webpack相关依赖是最新稳定版，旧版本可能存在热更新兼容性问题。

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