angular - Storybook 对某些组件出现“无法读取未定义的属性（读取 'base16'）”错误

我正在尝试在 Storybook 中展示我的 Angular 组件。对于某些组件，这可以正常工作，但对于其他组件，我不断收到这个异常提示：

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 被执行时，它会导出一个包含在 index.mjs 中 cjs 上期望的所有属性的对象
• 执行通过一个名为 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 */
    },
};