Décrivez le bogue
Un livre de contes généré automatiquement avec @storybook/source-loader
imprime ce message d'erreur et les sources ne se chargent pas, et aucun onglet «Histoire» n'apparaît.
Reproduire
Demo Repo : https://github.com/petermikitsh/sb-source-error (exécutez simplement yarn start-storybook
)
Étapes pour reproduire le comportement:
npx init storybook # choose react
npm i @storybook/source-loader --dev
.storybook / main.js:
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
+ "@storybook/source-loader",
],
+ webpackFinal: async (config) => {
+ config.module.rules = [
+ ...config.module.rules,
+ {
+ test: /\.stories\.jsx?$/,
+ loaders: [
+ {
+ loader: require.resolve("@storybook/source-loader"),
+ options: { parser: "javascript" },
+ },
+ ],
+ enforce: "pre",
+ },
+ ];
+ return config;
+ },
};
info @storybook/react v6.0.5
info
info => Loading presets
WARN Failed to load preset: {"name":"@storybook/source-loader","type":"presets"} on level 1
ERR! TypeError: Cannot read property 'query' of undefined
ERR! at getOptions (/[REDACTED]/node_modules/loader-utils/lib/getOptions.js:6:31)
ERR! at readAsObject (/[REDACTED]/node_modules/@storybook/source-loader/dist/dependencies-lookup/readAsObject.js:25:45)
Comportement prévisible
Aucune erreur, le code source de l'histoire se charge.
Captures d'écran
Mes excuses, j'ai peut-être mal lu la documentation. Je pense que ma configuration listée ci-dessus est incorrecte. J'ai depuis mis à jour ma configuration. La plupart de mes histoires sont maintenant remplies de code source.
Les addons devraient être quelque chose comme:
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
+ "@storybook/addon-storysource",
],
@storybook/addon-storysource
utilise @storybook/source-loader
sous le capot. Si vous surchargez les configurations webpack (par exemple en définissant votre propre tableau config.module.rules
, vous devrez configurer @storybook/source-loader
vous-même.
Commentaire le plus utile
Mes excuses, j'ai peut-être mal lu la documentation. Je pense que ma configuration listée ci-dessus est incorrecte. J'ai depuis mis à jour ma configuration. La plupart de mes histoires sont maintenant remplies de code source.
Les addons devraient être quelque chose comme:
@storybook/addon-storysource
utilise@storybook/source-loader
sous le capot. Si vous surchargez les configurations webpack (par exemple en définissant votre propre tableauconfig.module.rules
, vous devrez configurer@storybook/source-loader
vous-même.