angular - Storybook ล้มเหลวพร้อมข้อความ "ไม่สามารถอ่านคุณสมบัติของ undefined (กำลังอ่าน '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 */
    },
};