Descreva o bug
Um livro de histórias gerado automaticamente com @storybook/source-loader
imprime essa mensagem de erro e as fontes não carregam, e nenhuma guia 'História' aparece.
Reproduzir
Repo de demonstração : https://github.com/petermikitsh/sb-source-error (basta executar yarn start-storybook
)
Passos para reproduzir o comportamento:
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)
Comportamento esperado
Sem erro, o código-fonte da história é carregado.
Capturas de tela
Minhas desculpas - posso ter lido mal a documentação. Acho que minha configuração listada acima está incorreta. Desde então, atualizei minha configuração. A maioria das minhas histórias agora está preenchida com código-fonte.
Os complementos devem ser algo como:
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
+ "@storybook/addon-storysource",
],
@storybook/addon-storysource
usa @storybook/source-loader
sob o capô. Se você estiver substituindo as configurações do webpack (por exemplo, definindo seu próprio array config.module.rules
, você precisará configurar @storybook/source-loader
você mesmo.
Comentários muito úteis
Minhas desculpas - posso ter lido mal a documentação. Acho que minha configuração listada acima está incorreta. Desde então, atualizei minha configuração. A maioria das minhas histórias agora está preenchida com código-fonte.
Os complementos devem ser algo como:
@storybook/addon-storysource
usa@storybook/source-loader
sob o capô. Se você estiver substituindo as configurações do webpack (por exemplo, definindo seu próprio arrayconfig.module.rules
, você precisará configurar@storybook/source-loader
você mesmo.