صف الخلل
كتاب قصص تم إنشاؤه تلقائيًا مع @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)
سلوك متوقع
لا يوجد خطأ ، يتم تحميل شفرة مصدر القصة.
لقطات
اعتذاري - ربما أخطأت في قراءة الوثائق. أعتقد أن التكوين الخاص بي المذكور أعلاه غير صحيح. لقد قمت منذ ذلك الحين بتحديث التكوين الخاص بي. يتم الآن ملء معظم قصصي بشفرة المصدر.
يجب أن تكون الإضافات شيئًا مثل:
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
+ "@storybook/addon-storysource",
],
يستخدم @storybook/addon-storysource
@storybook/source-loader
تحت الغطاء. إذا كنت تتخطى تكوينات حزمة الويب (مثل تحديد مصفوفة config.module.rules
بك ، فستحتاج إلى إعداد @storybook/source-loader
بنفسك.
التعليق الأكثر فائدة
اعتذاري - ربما أخطأت في قراءة الوثائق. أعتقد أن التكوين الخاص بي المذكور أعلاه غير صحيح. لقد قمت منذ ذلك الحين بتحديث التكوين الخاص بي. يتم الآن ملء معظم قصصي بشفرة المصدر.
يجب أن تكون الإضافات شيئًا مثل:
يستخدم
@storybook/addon-storysource
@storybook/source-loader
تحت الغطاء. إذا كنت تتخطى تكوينات حزمة الويب (مثل تحديد مصفوفةconfig.module.rules
بك ، فستحتاج إلى إعداد@storybook/source-loader
بنفسك.