microsoft
Directline webchat not working in React Strict Mode
Is it an issue related to Adaptive Cards?
No
Is this an accessibility issue?
No
What version of Web Chat are you using?
Latest production
Which distribution are you using Web Chat from?
NPM
Which hosting environment does this issue primarily affect?
Web apps
Which browsers and platforms do the issue happened?
Browser: Edge (latest), Browser: Chrome (latest), Browser: Firefox (latest)
Which area does this issue affect?
Others or unrelated
What is the public URL for the website?
No response
Please describe the bug
Minimizable web chat example from samples is not working in React Strict Mode. conversations API is getting cancelled
React Version: 18.2.0 NodeJS: 18.19.1
Do you see any errors in console log?
No response
How to reproduce the issue?
- Navigate to samples of webchat from this repo
- Go to minimizable-webchat sample
- Add React Strict Mode
- Install the node modules and start the application
- You will see conversations API getting cancelled.
What do you expect?
Bot should start and conversations API should succeed.
NOTE: Bot works if React Strict Mode is removed.
What actually happened?
Bot shows "connecting..." and not starting. (Attached screenshot for the same)
Do you have any screenshots or recordings to repro the issue?
Adaptive Card JSON
No response
Additional context
No response
I've also encountered this with a brand new project using react 18.2.66 as per the README, using bot framework 4.16.0
Can also confirm that this is a problem with React 18.3.1 with bot framework 4.18.0
I also have this issue on a Next.js project (v14.2 and React v18.2). I tried with CRA too, CodeSandbox, Stackblitz, Vite... it just never works with strict mode, conversations request gets canceled. I'm actually glad I found this issue, at least I now know why. But to me it makes the ReactWebChat unusable, because disabling strict mode is not an option. Any updates on this ?
