Error with React 18 in development mode

[TimoBechtel]

Expected behavior

Daily works in development mode: The DailyProvider manages creating and destroying the callObject correctly.

Describe the bug (unexpected behavior)

With react 18 running in development mode, it throws the error Duplicate DailyIframe instances are not allowed, essentially breaking the app in dev mode. This is due to react 18 rendering the app twice in development mode.

Maybe the call object is not cleaned up correctly on unmount?

Steps to reproduce

1. Create a react app npx create-react-app my-app

2. Replace App.js with the following:

   import { DailyProvider } from '@daily-co/daily-react';
   import './App.css';
   
   function App() {
       return <DailyProvider>Hello World</DailyProvider>;
   }
   
   export default App;

3. Run the development server npm start
4. It now throws the error Duplicate DailyIframe instances are not allowed

System information

* Device: * OS, version: * Browser, version: # Additional context ## Daily versions: ```json "@daily-co/daily-js": "0.45.0", "@daily-co/daily-react": "^0.8.0", ```

[Regaddi]

Thanks @TimoBechtel for the report!

I'll make sure to prioritize this work. In the meantime I'd suggest to stay on @daily-co/daily-js@0.44.1, as the thrown error is a behavioral change in 0.45.0.

[TimoBechtel]

Thanks for the quick reply!

I had a few issues with video / audio devices, and I was trying to use the new version to see if the issue has been fixed or is on my side. My current workaround is to create the callObject outside the provider myself and pass it using the callObject prop.

[Regaddi]

@TimoBechtel This issue should be fixed in Daily React 0.9.0. Let me know in case you're running into any issues after updating.