TypeError on CallComposite i.CallClient is not a constructor
#2616
-
|
Describe the bug; what happened?
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 AzureCommunicationsWhat are the steps to reproduce the issue? What behavior did you expect?
If applicable, provide screenshots: In what environment did you see the issue?
|
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 7 replies
-
|
I don't know why but the error is gone when I switch swcMinify: true to false in next.config.js |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Im having a similar issue too. 
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks for sharing this issue. I will be taking a look into it today. |
Beta Was this translation helpful? Give feedback.
-
|
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; |
Beta Was this translation helpful? Give feedback.
-
|
@dev-bazz I am still currently investigating. The main hurdle I do see is that the javascript SDKs are meant to be running on the browser where we have a window object. By default NextJS makes assumptions that code can be rendered on the server or some combination of incremental server/client side rendering. According to my research it seems like dynamic importing if we know we are on the client or simply returning nothing if we are on the server till we are on the client seems to be the most predominant strategies that I am finding. Ultimately, we are building client-side typescript react code and the underlying Calling SDK takes a dependency on the window object. Still continuing to look further. |
Beta Was this translation helpful? Give feedback.
-
|
Taking a deeper look into this. Webpack with NextJS seems to be pulling in the UMD dist of the Calling SDK which tries to attach itself to the window object but since its on the server it is not happy. The Web Calling SDK is not designed to work on the server and so we need to understand how to avoid rendering on the server for the component using the Web Calling SDK. We need to force the import to be using the ESM bundle instead of UMD and we need to only do this on the client side. When I tried in my own local environment the server is compiling and complaining that it can't import which means that its trying to process it on the client but its not there. It would be helpful to know if you are getting any errors in your terminal from the console when your server is compiling to verify if there are imports happening on the server side where we know this web calling sdk will definitely not work. |
Beta Was this translation helpful? Give feedback.
-
|
Any update on this one? |
Beta Was this translation helpful? Give feedback.
-
|
The callClient issue comes from NextJS pulling a UMD bundle instead of the ESM one. We are looking for a change from the underlying Calling SDK so that this should be working. |
Beta Was this translation helpful? Give feedback.
-
|
@alkwa-msft I am able to make it work using turbopack |
Beta Was this translation helpful? Give feedback.
-
|
Only the development server uses Turbopack. Any production builds are built using another path to create the static js assets. For creating the builds that are deployed there is as nextjs compiler that is used. I don't have much expertise in this area beyond this but to answer your question turbopack is not used in creating local or production builds. |
Beta Was this translation helpful? Give feedback.
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.