Skip to content
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

Open
juliengalego opened this issue Feb 4, 2025 · 4 comments
Open

CallClient is not a constructor in NextJS 15 #5615

juliengalego opened this issue Feb 4, 2025 · 4 comments

Comments

@juliengalego
Copy link

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

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

@alkwa-msft
Copy link
Contributor

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.

#2616

Will share more when we are able to repro and have a better understanding of what is going on.

@alkwa-msft
Copy link
Contributor

alkwa-msft commented Feb 4, 2025

@juliengalego

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.

@alkwa-msft
Copy link
Contributor

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.

@alkwa-msft
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants