Error <path> attribute d: Expected number, "MNaN,NaN\n A32.5,…"

Working with Data
1

Error: attribute d: Expected number, “MNaN,NaN\n A32.5,…”. bundle.js:16703

I seem to be getting this error after calling a function (getInfoById(id)).

  useEffect(() => {
    async function fetchData() {
      const realm_id = //id omitted
      const app = new Realm.App({ id: realm_id });
      const credentials = //credentials omitted

      try {
        const user = await app.logIn(credentials);
        debugger;
        await user.functions
          .getInfoById(id)
          .then((result) => setInfo(result));
      } catch (error) {
        console.log("This went wrong: ", error);
      }
    }
    fetchData();
  }, [id]);

I have looked up this error and all I can find online is that it looks like it might be an issue with nested data. But the result is an object, as expected, so I can’t figure out what is happening. Everything is working like I expect, I’m just trying to clear out/ understand this error.

2

I believe getInfoById(id) is your handcrafted function on the Atlas. So, now, what “id” is it you send from this app, and what does your function expect it to be?

you might be missing a type conversion between number and string, or it might be something completely different than expected. put some printing on both sides and check what really is sent and then received.

or it might be the result you are sending back from the function, and thus the “info” is not what you expect. check that too with printing before “setInfo”.

3

Thanks, Yilmaz!

I can verify on the client side that the id being passed is a string. But I’m not sure how to tell what the function expects on the backend. This is the function in MongoDB:

exports = function(arg){
  
  let collection = context.services.get("ClusterName").db("DBName").collection("Info");
  
  return collection.findOne({id:(arg)});
};

Since it’s so basic, and I’m not defining the type for the parameter, I’m not sure how it would know what to expect. Can you help me determine that in the function, or is there anything in this function that you’re going: “Oh you’re missing this”?

Also, just want to clarify: the “info” is exactly what I expect; it returns an object just like I expect, and the app is working as expected. It’s just also throwing that error. So really just trying to clear out the error. Not sure if that helps.

Thanks for taking a look at this, and any help you can provide!

4

My first instinct was to check these values and functions because I thought they could be responsible.

It turns out this error comes from creating an SVG image. you are either directly trying to create one, or using some library like D3.js.

The problem here is that you are either not storing correctly formatted data, or you are not using your data in the correct order/type required by that svg-creating function.

it can be a number parsing error, or wrong object depth, or wrong array indexing. just check your returned info data and make sure you are using the correct names, indices and values. for example, findOne method gives you a single object, but find method gives an array of objects even when it has a single object.