バグを説明する
@storybook/source-loader
自動生成されたストーリーブックは、このエラーメッセージを出力し、ソースはロードされず、[ストーリー]タブは表示されません。
再現するには
デモリポジトリ: https : yarn start-storybook
実行するだけ)
動作を再現する手順:
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)
予想される行動
エラーなし、ストーリーのソースコードが読み込まれます。
スクリーンショット
申し訳ありませんが、ドキュメントを読み間違えた可能性があります。 上記の設定が正しくないと思います。 その後、構成を更新しました。 私の話のほとんどは現在、ソースコードで埋められています。
アドオンは次のようになります。
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
+ "@storybook/addon-storysource",
],
@storybook/addon-storysource
は、内部で@storybook/source-loader
を使用します。 webpackの設定を上書きする場合(たとえば、独自のconfig.module.rules
配列を定義する場合は、 @storybook/source-loader
自分で設定する必要があります。
最も参考になるコメント
申し訳ありませんが、ドキュメントを読み間違えた可能性があります。 上記の設定が正しくないと思います。 その後、構成を更新しました。 私の話のほとんどは現在、ソースコードで埋められています。
アドオンは次のようになります。
@storybook/addon-storysource
は、内部で@storybook/source-loader
を使用します。 webpackの設定を上書きする場合(たとえば、独自のconfig.module.rules
配列を定義する場合は、@storybook/source-loader
自分で設定する必要があります。