Storybook: 소스 로더 : TypeError : 정의되지 않은 'query'속성을 읽을 수 없습니다.

버그 설명

@storybook/source-loader 와 함께 자동 생성 된 스토리 북은이 오류 메시지를 인쇄하고 소스가로드되지 않으며 '스토리'탭이 나타나지 않습니다.

재현하려면

데모 저장소 : https://github.com/petermikitsh/sb-source-error ( 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)

예상되는 행동

오류가 없습니다. 스토리 소스 코드가로드됩니다.

스크린 샷