-
Notifications
You must be signed in to change notification settings - Fork 71
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CallClient is not a constructor in NextJS 15 #5615
Comments
We see your message and we'll be looking into this. There is already an ongoing investigation around NextJS 14 however its a similar issue error that is appearing. Will share more when we are able to repro and have a better understanding of what is going on. |
Does this test project you are working with use @azure/communication-react or is it purely @azure/communication-calling? If it is the latter. The communication-calling package is specifically a browser javascript sdk. NextJs will attempt to always try to SSR by default and without a window object it will fail. I didn't get the exact same issue as what you had posted and will continue to look but this could potentially be breaking things? If you are using @azure/communication-react then please share that version number as well so we can better support you. This library is specifically responsible for @azure/communication-react. |
A few updates here: Able to repro. We have this project https://github.com/alkwa-msft/nextjs-comm-react and someone can just open up a codespace and npm run dev and see it. We have an engineer looking into this now form the right team. We are also seeing an issue around React 19 as part of NextJS 15. We will be looking into this update but as of right now we don't have a scheduled timeframe for the update to React 19. |
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. One of my colleagues was able to try using turbo pack in nextjs14 and was able to get around the issue in a hacky way but we need to have a better response to how to use NextJS with the web calling sdk. For NextJS 15 still they are taking a hard dependency on React19 and we still won't have that ready today but I am working with the product team on the roadmap. If you desire to use the ACS web UI Library with your nextjs experience. |
Describe the bug; what happened?
If i try to intanciate the class CallClient(), i get the error
TypeError: _azure_communication_calling__WEBPACK_IMPORTED_MODULE_0__.CallClient is not a constructor
If applicable, provide screenshots:
![Image](https://private-user-images.githubusercontent.com/42695926/409517099-14f98053-953a-458c-9d7b-fbcd4f78307f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0MjYxNjEsIm5iZiI6MTczOTQyNTg2MSwicGF0aCI6Ii80MjY5NTkyNi80MDk1MTcwOTktMTRmOTgwNTMtOTUzYS00NThjLTlkN2ItZmJjZDRmNzgzMDdmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEzVDA1NTEwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJhYTE3NzUzYTBlMDQwMzQyM2RjODY0YTMwMDI0MWM1ZWYzYzQ4ODNlNmQwNDIzNGMyZjhkNjBiMGUxN2ZlYjUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.WDuiTa1W-lmslgvBZvb9TdpeJTTSM20G9ME4QPFHYNk)
In what environment did you see the issue?
"@azure/communication-calling": "^1.32.1"
"next": "^15.1"
Is there any additional information?
Previous tickets managed to solve the problem by setting swcMinify to false (it didn't work for me).
NextJS 15 do not support swcMinify customization anymore (vercel/next.js#65579)
NextJS is a trending framework and it's devastating if it's not compatible
The text was updated successfully, but these errors were encountered: