Describe el error
Un libro de cuentos generado automáticamente con @storybook/source-loader
imprime este mensaje de error y las fuentes no se cargan y no aparece la pestaña 'Historia'.
Reproducir
Demo Repo : https://github.com/petermikitsh/sb-source-error (simplemente ejecute yarn start-storybook
)
Pasos para reproducir el comportamiento:
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)
Comportamiento esperado
Sin error, se carga el código fuente de la historia.
Capturas de pantalla
Mis disculpas, es posible que haya leído mal la documentación. Creo que mi configuración enumerada anteriormente es incorrecta. Desde entonces actualicé mi configuración. La mayoría de mis historias ahora están llenas de código fuente.
Los complementos deberían ser algo como:
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
+ "@storybook/addon-storysource",
],
@storybook/addon-storysource
usa @storybook/source-loader
debajo del capó. Si está anulando las configuraciones del paquete web (por ejemplo, definiendo su propia matriz config.module.rules
, deberá configurar @storybook/source-loader
usted mismo.
Comentario más útil
Mis disculpas, es posible que haya leído mal la documentación. Creo que mi configuración enumerada anteriormente es incorrecta. Desde entonces actualicé mi configuración. La mayoría de mis historias ahora están llenas de código fuente.
Los complementos deberían ser algo como:
@storybook/addon-storysource
usa@storybook/source-loader
debajo del capó. Si está anulando las configuraciones del paquete web (por ejemplo, definiendo su propia matrizconfig.module.rules
, deberá configurar@storybook/source-loader
usted mismo.