Storybook Typescript not loading newly added props type, need storybook restart

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

Above is my main.js file

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

After adding new props to the props type (let say height) to my button type, Storybook might not show the newly added props or newly added comments and the new props or comments will show only if I restart storybook again by executing the npm run storybook script. Everything (description, properties) will be loaded and showing after a storybook restart.

I have included the typescript config in my main.js since day one and decided to seek for help because it is not efficient having to restart storybook if new changes don't show up. Please let me know anything that I can try to resolve this issue.

0 Answers
Related