Azure-sdk-for-js: Add communication-calling package

[jeremykirc]

The communication-calling package is not available on Github like the other communication packages. I have issues when trying to use the package as it appears to be released in npm with a different directory structure than the other communication packages. I get the following error when trying to import the CallClient in my React app and I do not get issues with any of the other @azure/communication packages.

ERROR in ./app/webpack/components/VideoCall.js 74:25-35
"export 'CallClient' was not found in '@azure/communication-calling'
at HarmonyImportSpecifierDependency._getErrors (/Users/jkirchhoff/spp/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
at HarmonyImportSpecifierDependency.getErrors (/Users/jkirchhoff/spp/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
at Compilation.reportDependencyErrorsAndWarnings (/Users/jkirchhoff/spp/node_modules/webpack/lib/Compilation.js:1463:22)
at /Users/jkirchhoff/spp/node_modules/webpack/lib/Compilation.js:1258:10
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jkirchhoff/spp/node_modules/tapable/lib/HookCodeFactory.js:33:10), :13:1)
at AsyncSeriesHook.lazyCompileHook (/Users/jkirchhoff/spp/node_modules/tapable/lib/Hook.js:154:20)
at Compilation.finish (/Users/jkirchhoff/spp/node_modules/webpack/lib/Compilation.js:1253:28)
at /Users/jkirchhoff/spp/node_modules/webpack/lib/Compiler.js:672:17
at _done (eval at create (/Users/jkirchhoff/spp/node_modules/tapable/lib/HookCodeFactory.js:33:10), :7:1)
at eval (eval at create (/Users/jkirchhoff/spp/node_modules/tapable/lib/HookCodeFactory.js:33:10), :54:22)

[DominikMe]

Hi @jeremykirc, thanks for filing! The communication-calling package is closed-source, adding @akania who is working on the calling part for JS.

In the meantime, can you share how you import the module, which version of webpack you're using and what your webpack config looks like? Calling gets packaged as UMD modules.

[jeremykirc]

@DominikMe @akania Webpack version is 4.44.2. I'm importing the module as the documentation describes import { CallClient, CallAgent } from "@azure/communication-calling"; This is a Rails + React app, which doesn't directly use a webpack config, Rails generates this based on a combination of a few files. I am using a few different loaders (jsx loader, typescript loader), which I thought could be the source of the issue, but I tried removing them and it didn't solve the issue. I also tried using umd-compat-loader, but still no luck.

[mariusu-msft]

@jeremykirc I'm trying to investigate your issue, would you be able to tell me more about your setup? WebPack version, React version, JS only or React + Typescript?

[akania]

@jeremykirc are you to provide us with a sample project with minimal setup that would allow us to repro this issue
we can also start by looking at your webpack config, which webpack TS loader are you using.

[jeremykirc]

@jeremykirc I'm trying to investigate your issue, would you be able to tell me more about your setup? WebPack version, React version, JS only or React + Typescript?

@mariusu-msft As previously stated Webpack version is 4.44.2. React version. Our app is just a React app, no typescript, but we are importing a package from an adjacent team that is typescript and requires us to use typescript loader. Typescript version is 4.0.3. React version is 16.13.1.

[jeremykirc]

@jeremykirc are you to provide us with a sample project with minimal setup that would allow us to repro this issue
we can also start by looking at your webpack config, which webpack TS loader are you using.

@akania TS loader I am using is "ts-loader" version 8.0.4. I'll see if I can put together a stripped down sample version of the app.

[jeremykirc]

@akania can you provide me with an email address where I can send you a sample version of our application?

[mariusu-msft]

@jeremykirc if you are using rails webpacker, can you try this fix highlighted here: https://github.com/rails/webpacker/blob/master/docs/v4-upgrade.md#excluding-node_modules-from-being-transpiled-by-babel-loader

Pasting from link:

One change to take into consideration, is that Webpacker 4 transpiles the node_modules folder with the babel-loader. This folder used to be ignored by Webpacker 3. The new behavior helps in case some library contains ES6 code, but in some cases it can lead to issues. To avoid running babel-loader in the node_modules folder, replicating the same behavior as Webpacker 3, the following code can be added to config/webpack/environment.js:

environment.loaders.delete('nodeModules')

[jeremykirc]

@mariusu-msft This solved my issue! I ended up using a more targeted solution, but both seemed to work.
const nodeModulesLoader = environment.loaders.get('nodeModules')
if (!Array.isArray(nodeModulesLoader.exclude)) { nodeModulesLoader.exclude = (nodeModulesLoader.exclude == null) ? [] : [nodeModulesLoader.exclude] }
nodeModulesLoader.exclude.push(/@azure\/communication-calling/)