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

[dev-bazz]

Im having a similar issue too.
i have remove my inital setup .
just did this to show you.
i did the swcMinify: false,
didn't work

[alkwa-msft]

Thanks for sharing this issue. I will be taking a look into it today.

[dev-bazz]

Sorry i failed to menetion this was a nextjs14 project

{
  "name": "alumni",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "npm install": "npm i",
    "biome-lint": "npx @biomejs/biome format --write src/",
    "biome-setup": "npm install --save-dev --save-exact @biomejs/biome",
    "biome-write": "npx @biomejs/biome format --write src/",
    "biome-check": "npx @biomejs/biome check --write src/",
    "biome-fix": "npx @biomejs/biome check --fix src/"
  },
  "dependencies": {
    "@azure/communication-calling": "^1.26.1",
    "@azure/communication-chat": "^1.5.4",
    "@azure/communication-common": "^2.3.1",
    "@azure/communication-identity": "^1.3.1",
    "@azure/communication-react": "^1.23.0",
    "@azure/functions": "^4.6.0",
    "@azure/identity": "^4.6.0",
    "@azure/storage-blob": "^12.23.0",
    "@fluentui/react": "^8.122.9",
    "@microsoft/microsoft-graph-client": "^3.0.7",
    "@react-email/html": "^0.0.10",
    "@tanstack/react-query": "^5.45.1",
    "@tanstack/react-query-devtools": "^5.45.1",
    "@tanstack/react-table": "^8.20.6",
    "@tiptap/extension-character-count": "^2.5.4",
    "@tiptap/extension-mention": "^2.9.1",
    "@tiptap/extension-placeholder": "^2.1.0-rc.1",
    "@tiptap/pm": "^2.5.0",
    "@tiptap/react": "^2.5.0",
    "@tiptap/starter-kit": "^2.5.0",
    "@tiptap/suggestion": "^2.5.0",
    "@types/bcrypt": "^5.0.2",
    "@types/dompurify": "^3.0.5",
    "@types/jsonwebtoken": "^9.0.6",
    "@types/nodemailer": "^6.4.15",
    "@types/nodemailer-sendgrid": "^1.0.3",
    "bcrypt": "^5.1.1",
    "dompurify": "^3.1.6",
    "jsonwebtoken": "^9.0.2",
    "mongodb": "^6.7.0",
    "next": "^14.2.5",
    "next-auth": "^5.0.0-beta.19",
    "nodemailer": "^6.9.16",
    "nodemailer-sendgrid": "^1.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.51.5",
    "react-loader-spinner": "^6.1.6",
    "recharts": "^2.15.0",
    "sass": "^1.77.4",
    "sonner": "^1.5.0",
    "uuid": "^11.0.5",
    "zod": "^3.23.8",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@biomejs/biome": "1.8.3",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "^14.2.5",
    "typescript": "^5"
  }
}

Next config

/** @type {import('next').NextConfig} */
const nextConfig = {
	// output: 'standalone', // mine worked fine without this line

	images: {
		remotePatterns: [
			{
				protocol: 'https',
				hostname: '*',
			},
		],
	},
	compiler: {
		removeConsole: process.env.NODE_ENV === 'production',
		
	},
	swcMinify: false,

};

export default nextConfig;