reactjs - Storybook Typescript לא טוען את סוג הפרופס שהוספו לאחרונה, צריך להפעיל מחדש את 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
}
לאחר הוספת תכונות חדשות לסוג התכונות (נגיד גובה) לסוג הכפתור שלי, Storybook עשוי לא להראות את התכונות החדשות שהתווספו או את ההערות החדשות, והתכונות או ההערות החדשות יופיעו רק אם אני מאתחל את Storybook שוב על ידי הרצת הסקריפט npm run storybook. הכל (תיאור, תכונות) ייטען ויוצג לאחר אתחול של Storybook.
כללתי את קובץ התצורה של TypeScript בקובץ main.js שלי מהיום הראשון והחלטתי לפנות לעזרה כי זה לא יעיל להיאלץ להפעיל מחדש את Storybook אם שינויים חדשים לא מופיעים. אנא יידעו אותי על כל דבר שאני יכול לנסות כדי לפתור את הבעיה הזו.