reactjs - Storybook Typescript no carga los tipos de props recién agregados, necesita reiniciar 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;
}
};
Arriba está mi archivo main.js
export type ButtonProps= {
width: string;
/** Some comments */
height: string; // let say I added this after starting up Storybook
}
Después de agregar nuevas propiedades al tipo de props (digamos altura) a mi tipo de botón, Storybook podría no mostrar las propiedades recién agregadas o los comentarios recién agregados, y las nuevas propiedades o comentarios solo se mostrarán si reinicio Storybook nuevamente ejecutando el script npm run storybook. Todo (descripción, propiedades) se cargará y mostrará después de reiniciar Storybook.
He incluido la configuración de TypeScript en mi main.js desde el primer día y decidí buscar ayuda porque no es eficiente tener que reiniciar Storybook si los nuevos cambios no aparecen. Por favor, hágame saber cualquier cosa que pueda intentar para resolver este problema.