Unhandled Rejection (Error): property 'url': url should be a string

[zeankundev]

I was trying to run the project, but when I clicked to start a meeting, this happened.

Unhandled Rejection (Error): property 'url': url should be a string.
<StartButton
  224 |     disabled={!enableStartButton}
  225 |     onClick={() => {
> 226 |       createCall().then((url) => startJoiningCall(url));
      | ^  227 |     }}
  228 |   />
  229 | )}

Here is my api.js file.

async function createRoom() {

  const exp = Math.round(Date.now() / 1000) + 60 * 30;
  const options = {
    properties: {
      exp: exp,
    },
  };
  let response = await fetch(newRoomEndpoint, {
    method: "POST",
    body: JSON.stringify(options),
    mode: 'cors',
  }),
    room = await response.json();
  return room;

  // Comment out the above and uncomment the below, using your own URL
  return { url: "https://occursum.daily.co/occursum" };
}

[jessmitch42]

Hi @zeankundev!

If you're using an existing room (e.g. https://occursum.daily.co/occursum, you don't need the fetch request to create a new one, so everything above the last return can be commented out or deleted, like this:

async function createRoom() {
 
  // Comment out the above and uncomment the below, using your own URL
  return { url: "https://occursum.daily.co/occursum" };
}

We'll add some extra error handling to make this a little clearer! :)

[AliSajid321]

I am getting the same error when I try to run the dev environment on netlify. I have followed all the steps for deploying on netlify but am getting the same error.

I installed the netlify cli and logged in to my account and deployed the project to my account.

I have added my API key to the .env file and I am not using the hardcoded room url.

After this I ran netlify build as stated in the Readme.md

Here is my api.js file.

async function createRoom() {

  const exp = Math.round(Date.now() / 1000) + 60 * 30;
  const options = {
    properties: {
      exp: exp,
    },
  };
  let response = await fetch(newRoomEndpoint, {
    method: "POST",
    body: JSON.stringify(options),
    mode: 'cors',
  }),
    room = await response.json();
  return room;

  // Comment out the above and uncomment the below, using your own URL
   
}

export default { createRoom };

However when i run netlify dev and click the start call button, i get the same error : Unhandled Rejection (Error): property 'url': url should be a string.

(anonymous function)
src/components/App/App.js:53

50 |   setRoomUrl(url);
  51 |   setCallObject(newCallObject);
  52 |   setAppState(STATE_JOINING);
> 53 |   newCallObject.join({ url });
     | ^  54 | }, []);
  55 | 
  56 | /**

(anonymous function)
src/components/App/App.js:226

223 |   <StartButton
  224 |     disabled={!enableStartButton}
  225 |     onClick={() => {
> 226 |       createCall().then((url) => startJoiningCall(url));
      | ^  227 |     }}
  228 |   />
  229 | )}

[jessmitch42]

Thanks for following up. I'll take a look today.
Heads up: this demo is being flagged as unmaintained shortly. We have a newer demo app with the same feature set that uses Daily React Hooks, which we recommend for React apps using Daily.

It can be found here if you're interested in looking in the meantime:
https://github.com/daily-demos/custom-video-daily-react-hooks

[jessmitch42]

Hi @AliSajid321 apologies for the delay.
I just tested this by clicking the Deploy with Netlify button on the README and couldn't replicate this error. (It worked as expected.) You may need to manually add your DAILY_API_KEY variable in Netlify in the Environment variables area instead of updating the .env file.
If that doesn't solve it, you can add some error handling to the createCall() method to see what the error is. From what you've shared, the room is not being create properly so the url isn't being returned to join with.
Another way to confirm if the room is being created properly is to press the Click to start call button and see if there's a new room in your dashboard view. https://dashboard.daily.co/rooms