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 */
    },
};