Beschreibe den Fehler
Ein automatisch generiertes Storybook mit @storybook/source-loader
druckt diese Fehlermeldung und die Quellen werden nicht geladen, und es wird keine Registerkarte "Story" angezeigt.
Fortpflanzen
Demo-Repo : https://github.com/petermikitsh/sb-source-error (führen Sie einfach yarn start-storybook
)
Schritte zum Reproduzieren des Verhaltens:
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)
Erwartetes Verhalten
Kein Fehler, Story-Quellcode wird geladen.
Screenshots
Ich entschuldige mich - ich habe die Dokumentation möglicherweise falsch gelesen. Ich denke, meine oben aufgeführte Konfiguration ist falsch. Ich habe seitdem meine Konfiguration aktualisiert. Die meisten meiner Geschichten sind jetzt mit Quellcode gefüllt.
Addons sollten so etwas wie sein:
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
+ "@storybook/addon-storysource",
],
@storybook/addon-storysource
verwendet @storybook/source-loader
unter der Haube. Wenn Sie Webpack-Konfigurationen überschreiben (z. B. das Definieren Ihres eigenen config.module.rules
-Arrays), müssen Sie @storybook/source-loader
selbst einrichten.
Hilfreichster Kommentar
Ich entschuldige mich - ich habe die Dokumentation möglicherweise falsch gelesen. Ich denke, meine oben aufgeführte Konfiguration ist falsch. Ich habe seitdem meine Konfiguration aktualisiert. Die meisten meiner Geschichten sind jetzt mit Quellcode gefüllt.
Addons sollten so etwas wie sein:
@storybook/addon-storysource
verwendet@storybook/source-loader
unter der Haube. Wenn Sie Webpack-Konfigurationen überschreiben (z. B. das Definieren Ihres eigenenconfig.module.rules
-Arrays), müssen Sie@storybook/source-loader
selbst einrichten.