ReactWebChat not working on Next.JS 14 about botframework-webchat

[iahmediibrahim]

@OEvgeny for the build to succeed, you need to change the return of the provider to this:

return function WebChatProvider(props) { return <WebChatContext.Provider value={WebChat} {...props} />; };

[OEvgeny]

I'm looking into this and seems the issue is that WebChat doesn't currently support ESM environments properly

[OEvgeny]

Here is the working example of WebChat + NextJS: https://stackblitz.com/edit/stackblitz-starters-e38mut?file=app%2Fpage.tsx

[Chosey98]

Oh it worked, Could you please elaborate more on why did it work like that? @OEvgeny

[OEvgeny]

@Chosey98 if using regular top-level imports, despite use-client directive it looks like NextJS imports WebChat on the server, which doesn't work as WebChat is designed to work in the browser.

In browser, in order to include WebChat into the same component tree, we need to use the same React and ReactDOM distributions. This means not only React and ReactDOM versions should match, but the actual imported modules should be the same.

For such cases WebChat provides a way to use exact React and ReactDOM versions. All you need is to expose them to window as window.React and window.ReactDOM.

At this point, this seems the best way possible to handle dependencies in browser. In future we may be able to use ES modules and import maps to handle this.