Can’t import the named export ‘EventEmitter’ (reexported as ‘EventEmitter’) from default-exporting module (only default export is available)
ERROR in ./node_modules/@fluid-internal/client-utils/lib/indexBrowser.js 12:0-50
Can’t import the named export ‘EventEmitter’ (reexported as ‘EventEmitter’) from default-exporting module (only default export is available)

ERROR in ./node_modules/@fluid-internal/client-utils/lib/typedEventEmitter.js 12:39-51
Can’t import the named export ‘EventEmitter’ (imported as ‘EventEmitter’) from default-exporting module (only default export is available)

webpack compiled with 2 errors

Here is the Code of the component:

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);
  }
};

I get these errors when I try to import the AzureClient from @fluidframework/azure-client. This is a React JS app created using CRA.

This is 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

This is 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

I have tried reinstalling node_modules, cleaning cache and changing node versions.