angular - تفشل Storybook مع رسالة "لا يمكن قراءة خصائص غير معرفة (قراءة 'base16')" لبعض المكونات

أحاول عرض مكونات Angular الخاصة بي في Storybook. لبعض المكونات ينجح هذا، لكن بالنسبة لبعضها الآخر، أستمر في الحصول على هذا الاستثناء:

Cannot read properties of undefined (reading 'base16')
TypeError: Cannot read properties of undefined (reading 'base16')
    at ./node_modules/rfc4648/lib/index.mjs (http://localhost:4400/vendors-node_modules_angular-auth-oidc-client_fesm2020_angular-auth-oidc-client_mjs.iframe.bundle.js:14476:66)
    at __webpack_require__ (http://localhost:4400/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:4400/runtime~main.iframe.bundle.js:322:25)
    at ./node_modules/angular-auth-oidc-client/fesm2020/angular-auth-oidc-client.mjs (http://localhost:4400/vendors-node_modules_angular-auth-oidc-client_fesm2020_angular-auth-oidc-client_mjs.iframe.bundle.js:7520:65)
    at __webpack_require__ (http://localhost:4400/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:4400/runtime~main.iframe.bundle.js:322:25)
...

الملف الذي يحدث فيه الاستثناء، index.mjs، يبدو هكذا:

// Generated by rollup-plugin-mjs-entry

import cjs from './index.js';

export const base16 = cjs.base16;
export const base32 = cjs.base32;
export const base32hex = cjs.base32hex;
export const base64 = cjs.base64;
export const base64url = cjs.base64url;
export const codec = cjs.codec;
export default cjs;

من الواضح أنه يتم توليده بواسطة شيء يُسمى rollup-plugin-mjs-entry.

عندما أتنقل خلال هذا الكود، ألاحظ الأحداث التالية:

• يتم تنفيذ index.js، حيث يصدر كائنًا يحتوي على جميع الخصائص المتوقعة على cjs في index.mjs
• يمر التنفيذ عبر ملف يسمى bootstrap، والذي يقوم مرة أخرى بتصدير كائن يحتوي على كل الخصائص
• يصل التنفيذ إلى ملف يُسمى hot module replacement، والذي يستدعي شيئًا يُسمى require2 للطلب إلى index.js
• عندما أدخل في تلك المكالمة، يدخل التنفيذ إلى index.mjs، ويبدو أن cjs هو undefined

لست متأكدًا من كيفية إصلاح هذا أو حتى أين:

• هل هناك أي خطأ في إعدادات Storybook الخاصة بي؟
• هل هناك أي خطأ في ملف .stories.ts الخاص بي؟
• هل هذه مشكلة في Storybook؟
• هل هذه مشكلة في Webpack؟
• هل هناك أي خطأ في إعداد TypeScript الخاص بي؟
• هل هناك أي خطأ في أي من الحزم التابعة لأطراف ثالثة التي نقوم بسحبها؟
• ...؟

كيف يمكنني البدء في تصحيح هذا الخطأ؟

(أنا أعلم أنه لا يمكنك التخمين ما هو الخطأ بالضبط في مشروعي الخاص. أولاً وقبل كل شيء، هذا السؤال يتعلق بالجزء أو الجانب من التطبيق الذي أحتاج إلى النظر فيه كبداية. كنت سأقوم بنشر المزيد من الشيفرة إذا كنت أعلم فقط أي جزء من الشيفرة أو الإعدادات قد يكون ذا صلة على الإطلاق.)

إليك نسخة مختصرة من أحد ملفات .stories.ts المتأثرة:

import { HttpClientModule } from '@angular/common/http';
import { Meta, moduleMetadata } from '@storybook/angular';

// imports of 6 additional custom components and a custom pipe (all of which are used in MyComponent), as well as a mock data object
import { MyComponent } from './my.component';

export default {
    title: 'MyComponent',
    component: MyComponent,
    decorators: [
        moduleMetadata({
            imports: [HttpClientModule],
            declarations:[/* declarations of the six imported components */],
            providers:[/* declaration of the imported pipe */]
        }),
    ],
} as Meta<MyComponent>;

export const Primary = {
    render: (args: MyComponent) => ({
        props: args,
    }),
    args: {
        myData: /* the mock data object */
    },
};