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: 7 comments 16 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.
-
|
I tried it but Unable to resolve this issue. Could you please suggest me better solution?? |
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 am also facing the same issue, |
Beta Was this translation helpful? Give feedback.
-
|
Hi @kashif-ali-khan, can you confirm the versions of |
Beta Was this translation helpful? Give feedback.
-
|
@kashif-ali-khan can you also post the exact error you are seeing, there are a few different errors on this thread |
Beta Was this translation helpful? Give feedback.
-
|
"@azure/communication-call-automation": "^1.4.0", This is error : I am getting TypeError: CallClient is not a constructor |
Beta Was this translation helpful? Give feedback.
-
|
@kashif-ali-khan unfortunately we don't have enough information to reproduce this specific error. This is typically caused by the bundler (e.g. webpack, rollup etc.) not resolving the import correctly (this can be due to a variety of reasons such as unexpected module format, minification collisions, resolve path incorrect). Can you provide the code to a minimal repro with this error you are seeing? Ideally a clean nextjs project with no other code/dependencies other than If your error specifically mentioned |
Beta Was this translation helpful? Give feedback.
-
|
I am facing the same issue regarding this next config :package.json dependecies:Client APP:custom Hook:Loginazure Theme@JamesBurnside Can you please help me to figure out this issue , I create a new nextjs 15.3 project and paste same code with same dependencies it works there but not in my next.js14.2 application |
Beta Was this translation helpful? Give feedback.
-
|
@usmanahmedmigrio we have a fix inbound for this specific webpack import error, I can't give an ETA right now on when the npm version will be released, TL;DR on why this happened is that the |
Beta Was this translation helpful? Give feedback.
-
|
You are right @JamesBurnside , that's the issue, I am able fix this by doing some turn around in next .config, the main fix is else section Once you publish the new versoin , then this will be fixed, Thanks for giving the hint , at least now we can proceed |
Beta Was this translation helpful? Give feedback.
-
|
We have not done extensive testing with nextjs and it's support for SSR (server-side rendering). Let us know if there's anything in the package.json we should specify that would help nextjs resolve these exports more intelligently. I'll update this thread when we release the fix that removes the browser field from the package.json and see if this will help resolve your issue as well. |
Beta Was this translation helpful? Give feedback.
-
Thanks Bro it works for me |
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.