网站搜索

reactjs - Storybook Typescript 不加载新添加的 props 类型,需要重启 storybook


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;
  }
};

上面是我的 main.js 文件

export type ButtonProps= {
  width: string;
  /** Some comments */
  height: string;    // let say I added this after starting up Storybook
}

在向我的按钮类型的 props 类型中添加新的 props(比如 height)后,Storybook 可能不会显示新添加的 props 或新添加的注释,只有在通过执行 npm run storybook 脚本重新启动 Storybook 后,新 props 或注释才会显示。重新启动 Storybook 后,所有内容(描述、属性)都会被加载并显示。

自第一天起,我就在我的 main.js 中包含了 TypeScript 配置,并决定寻求帮助,因为如果新更改没有显示出来而必须重启 Storybook,这样做效率不高。请告诉我可以尝试的任何方法来解决这个问题。