Error in React JS application on importing AzureClient from @fluidframework/azure-client

[aman-sharma24]

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

I have no idea what is going on. I could not find any relevant information in documentations. I am creating a React JS app. I have reached here after going through a lot outdated examples & fluid functions which turned out to be deprecated.

[aman-sharma24]

Turns out it had to do with the way CRA resolves EventEmitter dependencies. I moved to custom webpack which resolved this error for me. Webpack 5 does has some known errors which are documented here. One of the only things that I could find in the documentation.

[jason-ha]

CRA (create-react-app) attempts to do some magic for management of polyfills as it does not directly expose webpack config.

Fluid Framework has reduced dependencies on Node.js core modules in 2.x but has not eliminated all of them. It is also common for any apps written on earlier versions of Fluid Framework to end up with a silent, direct Node.js module dependency and then those will persist even once Fluid Framework use has been eliminated. When the issue is missing polyfill, the error is not likely to be the above but a message that says Module not found: Error: Can't resolve '<name of Node.js module>' in ... and goes on to talk about polyfills. In those situations, if the root dependency can't be eliminated, then simply adding a polyfill to local package production dependencies will likely resolve the issue.

For the original posted error, the most common successful resolution is to use a CRA customizer, such as https://www.npmjs.com/package/@craco/craco or https://www.npmjs.com/package/customize-cra. The issue is that webpack is not understanding how to handle a .cjs file. See facebook/create-react-app#10356 (comment) for some discussion of the issue. Once a configuration customizer is installed, the important rule to inject is:

config.module.rules.push({
          test: /\.[cm]js$/,
          include: /node_modules/,
          type: 'javascript/auto',
        });

(Note that this rule handles both .cjs and .mjs. The referenced CRA issue only handles .mjs.)