TypeError on CallComposite i.CallClient is not a constructor

[henrynoowah]

Describe the bug; what happened?

• Azure Commuinication Call causing error when requesting call connection
  

• I have followed the GetStarted - CallComposite
  thus updated the code on branch fix/azure-call-composite hoping this would solve the issue but no luck

• Project environment

  • next: 12.3.4
  • node: 16.13.0
  • typescript: 4.7.4
  • react": 17.0.2,

• Please help me out and check if I am doing something wrong with the way of using CallComposite component

example:

import { GroupCallLocator } from '@azure/communication-calling'
import { AzureCommunicationTokenCredential } from '@azure/communication-common'
import {
  CallAdapter,
  CallComposite,
  createStatefulCallClient,
  useAzureCommunicationCallAdapter
} from '@azure/communication-react'
import Loading from '@components/common/Loading'
import { mediaQuerySize } from '@constants'
import useResizeHandler from '@hooks/useResizeHandler'
import { log } from '@utils/log'
import { useTranslation } from 'next-i18next'
import { FC, useContext, useEffect, useMemo } from 'react'
import { Context } from 'src/context/ContextProvider'

interface Params {
  displayName: string
  isClosingAcs: boolean
  setIsClosingAcs: Function
  setIsModalOpen: Function
  communicationUserId: string
  credential: AzureCommunicationTokenCredential
  locator: GroupCallLocator
}

const AzureCommunications: FC<Params> = ({
  displayName,
  isClosingAcs,
  setIsClosingAcs,
  setIsModalOpen,
  communicationUserId,
  credential,
  locator
}) => {
  const { setGroupCallId, showCommunications, groupCallId } = useContext(Context)
  const { t } = useTranslation(['common'])

  const windowWidth = useResizeHandler()
  const isMobile = useMemo(() => windowWidth < mediaQuerySize.sm, [windowWidth])

  const statefulCallClient = createStatefulCallClient({
    userId: { communicationUserId }
  })

  const callAdaptorArgs = useMemo(
    () => ({
      userId: { communicationUserId },
      displayName,
      credential,
      locator
    }),
    [communicationUserId, displayName, credential, locator]
  )

  const adapter = useAzureCommunicationCallAdapter(
    callAdaptorArgs,
    async (adapter: CallAdapter): Promise<CallAdapter> => {
      console.log('afterCreate', adapter)
      return adapter
    },
    async (adapter: CallAdapter): Promise<void> => {
      console.log('beforeDispose', adapter)
      await adapter.leaveCall().catch((e) => {
        console.error('Failed to leave call', e)
      })
    }
  )

  useEffect(() => {
    if (adapter) {
      console.log(adapter)
      log('has callAdapter. add callEnded event')
      adapter.on('callEnded', (event) => {
        log('callEnded: ', event.callId)
        setGroupCallId(null)
      })
    }
  }, [adapter])

  useEffect(() => {
    if (isClosingAcs) {
      log('call disposed')
      setGroupCallId(null)
      showCommunications(false)
      setIsClosingAcs(false)
      setIsModalOpen(false)
    }
  }, [isClosingAcs])

  return (
    <>
      {adapter ? (
        <CallComposite adapter={adapter} formFactor={isMobile ? 'mobile' : 'desktop'} />
      ) : (
        <Loading message={t('common:call:initializing_call')} />
      )}
    </>
  )
}

export default AzureCommunications

What are the steps to reproduce the issue?

What behavior did you expect?

• CallCompsite to run as expected

If applicable, provide screenshots:

In what environment did you see the issue?

• @azure/communication-react npm package version: 1.4.1

• @azure/communication-calling npm package version: 1.4.4

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]

• Browser: Google Chrome

• Browser Version: 07.0.5304.110 (Official Build) (arm64)

[hyunoosung]

I don't know why but the error is gone when I switch swcMinify: true to false in next.config.js
Had similar experience with swcMinify conflicts with ACS before.

[alkwa-msft]

@henrynoowah

https://github.com/alkwa-msft/nextjs-communication-react-calling-experiment

I created a small project to try to understand more about the nextjs/swc issues with azure communications service. I was wondering if you can check out my repo to see if I missed anything? it appears to work for me but I also am not an expert in nextjs and I might be setting it up incorrectly?

I would love to use this repo to better understand the issue so we can either code a better solution into our library or write some documentation to help the next .. nextjs developers

[alkwa-msft]

I have a repo now :)

From our findings swc is triggerable only when doing an npm run build && npm run start

I have made an update.
We have created a component that just creates a callClient but doesnt use communication-react and we still run into an issue.
This has helped us scope down the problem and we can work internally now with a way to locally repro to hopefully figure out the answer soon. Thanks for raising this issue