在 React 应用程序中从 @fluidframework/azure-client 导入 AzureClient 时出现与 EventEmitter 相关的错误

Question

无法从默认导出模块导入命名导出“EventEmitter”（重新导出为“EventEmitter”）（仅默认导出可用） ./node_modules/@fluid-internal/client-utils/lib/indexBrowser.js 中的错误 12:0-50 无法从默认导出模块导入命名导出“EventEmitter”（重新导出为“EventEmitter”）（仅默认导出可用）

./node_modules/@fluid-internal/client-utils/lib/typedEventEmitter.js 中的错误 12:39-51 无法从默认导出模块导入命名导出“EventEmitter”（导入为“EventEmitter”）（仅默认导出可用）

webpack 编译有 2 个错误

这是组件的代码：

import { useMsal } from "@azure/msal-react";
import { AzureClient } from "@fluidframework/azure-client";

export const generateFluidToken = async (
  tenantId,
  scopes = ["doc:read", "doc:write", "summary:write"],
  documentId
) => {
  const { instance } = useMsal();
  const Token = await instance.acquireTokenSilent({
    account: instance.getActiveAccount(),
  });

  const user = instance.getActiveAccount();
  const userName = user.name;
  const userId = user.username;

  const requestBody = {
    tenantId: tenantId,
    documentId: documentId,
    userId: userId,
    userName: userName,
    scopes: scopes,
  };
  console.log("requestBody", requestBody);
  try {
    const response = await fetch(process.env.REACT_APP_FLUID_FUNCTION_URL, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${Token.idToken}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(requestBody),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const fluidAccessToken = await response.json();
    return fluidAccessToken;
  } catch (error) {
    console.error("Error generating token:", error);
  }
};

当我尝试从 @fluidframework/azure-client 导入 AzureClient 时，出现这些错误。这是一个使用 CRA 创建的 React JS 应用程序。

这是 indexBrowser.js

/*!
 * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
 * Licensed under the MIT License.
 */
// Entrypoint for browser-specific code in the package.
// (See 'Isomorphic Code' section in the package README.md.)
export { bufferToString, isArrayBuffer, IsoBuffer, stringToBuffer, Uint8ArrayToString, } from "./bufferBrowser.js";
export { gitHashFile, hashFile } from "./hashFileBrowser.js";
export { performance } from "./performanceIsomorphic.js";
export { fromBase64ToUtf8, fromUtf8ToBase64, toUtf8 } from "./base64EncodingBrowser.js";
export { Uint8ArrayToArrayBuffer } from "./bufferShared.js";
export { EventEmitter } from "./eventEmitter.cjs";
export { Trace } from "./trace.js";
export { TypedEventEmitter, } from "./typedEventEmitter.js";
//# sourceMappingURL=indexBrowser.js.map

这是typedEmitter.js

/*!
 * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
 * Licensed under the MIT License.
 */
import { EventEmitter } from "./eventEmitter.cjs";
/**
 * Event Emitter helper class the supports emitting typed events.
 * @privateRemarks
 * This should become internal once the classes extending it become internal.
 * @alpha
 */
export class TypedEventEmitter extends EventEmitter {
    constructor() {
        super();
        this.addListener = super.addListener.bind(this);
        this.on = super.on.bind(this);
        this.once = super.once.bind(this);
        this.prependListener = super.prependListener.bind(this);
        this.prependOnceListener = super.prependOnceListener.bind(this);
        this.removeListener = super.removeListener.bind(this);
        this.off = super.off.bind(this);
    }
}
//# sourceMappingURL=typedEventEmitter.js.map

我尝试过重新安装node_modules、清理缓存和更改节点版本。

Answer 1

我使用 CRA 来创建模板。这是它处理进口的方式的问题。

由于它已经被弃用，所以我转向 webpack 是有意义的。我在我的 React 项目中使用了 https://createapp.dev/webpack。我使用了 webpack 5，它的 Fluid 框架确实存在一些已知问题，记录在here

Webpack 捆绑器与 Fluid 框架完美配合，不会导致上述错误。