Storybook: ソースローダー:TypeError:未定義のプロパティ「クエリ」を読み取れません

作成日 2020年08月13日  ·  1コメント  ·  ソース: storybookjs/storybook

バグを説明する

@storybook/source-loader自動生成されたストーリーブックは、このエラーメッセージを出力し、ソースはロードされず、[ストーリー]タブは表示されません。

再現するには

デモリポジトリhttpsyarn 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)

予想される行動

エラーなし、ストーリーのソースコードが読み込まれます。

スクリーンショット

Screen Shot 2020-08-12 at 9 06 38 PM

bug source-loader

最も参考になるコメント

申し訳ありませんが、ドキュメントを読み間違えた可能性があります。 上記の設定が正しくないと思います。 その後、構成を更新しました。 私の話のほとんどは現在、ソースコードで埋められています。

アドオンは次のようになります。

  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
+   "@storybook/addon-storysource",
  ],

@storybook/addon-storysourceは、内部で@storybook/source-loaderを使用します。 webpackの設定を上書きする場合(たとえば、独自のconfig.module.rules配列を定義する場合は、 @storybook/source-loader自分で設定する必要があります。

>すべてのコメント

申し訳ありませんが、ドキュメントを読み間違えた可能性があります。 上記の設定が正しくないと思います。 その後、構成を更新しました。 私の話のほとんどは現在、ソースコードで埋められています。

アドオンは次のようになります。

  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
+   "@storybook/addon-storysource",
  ],

@storybook/addon-storysourceは、内部で@storybook/source-loaderを使用します。 webpackの設定を上書きする場合(たとえば、独自のconfig.module.rules配列を定義する場合は、 @storybook/source-loader自分で設定する必要があります。

このページは役に立ちましたか?
0 / 5 - 0 評価