DOMException: Failed to execute 'put' on 'IDBObjectStore': <function> could not be cloned.

[secondl1ght]

Hello 👋🏼

I am running into the following error when using the localforage.setItem method.

DOMException: Failed to execute 'put' on 'IDBObjectStore': function(t){if(!(!this._popup||!this._map)){ft(t);var i=t.layer||t.target;if(this._popup._source===i&&!(i insta...<omitted>...}} could not be cloned.
    at https://btcmap.org/_app/immutable/chunks/localforage-9e4e8924.js:6:11234
    at V (https://btcmap.org/_app/immutable/chunks/localforage-9e4e8924.js:6:9129)
    at https://btcmap.org/_app/immutable/chunks/localforage-9e4e8924.js:6:11115

I have read other issues submitted surrounding this error (#610 and #533) and it sounds like this error appears when you try to set a data type to IndexedDB that it cannot handle like a function. In the case above it is telling me that I am trying to do that.

Now here is where it gets a little bit strange. I have console.logged the variable that I am setting to the local cache right before I use setItem and it does not contain any functions. It is an array of objects and the objects contain lots of data but no functions. The function it is referencing above comes from a node_module that I am using in my project. How it is ending up that localForage thinks it is included in this variable that I am trying to cache locally and not visible in the console.log I have no idea.

Now it gets even weirder.

Even though this error happens during the setItem function the key value in the IndexedDB DOES get updated with the new value. So even though we enter the catch part of the localForage method promise localForage.setItem.then still also runs. Because I am still achieving the desired functionality of storing the new value locally this bug is not technically stopping me from doing what I want. But I still would like to figure out why this is happening and fix it if possible. I have temporarily disabled the error toast for this function because it will appear every time it runs even though the action was successful.

Here is an example of one of the objects in the array of objects I am setting in the store:

{
  "id": "node:9985802993",
  "osm_json": {
    "changeset": 127516569,
    "id": 9985802993,
    "lat": 53.4423766,
    "lon": -2.2775673,
    "tags": {
      "addr:city": "Manchester",
      "addr:housenumber": "585A",
      "addr:postcode": "M21 9AF",
      "addr:street": "Wilbraham Road",
      "currency:GBP": "yes",
      "currency:XBT": "yes",
      "currency:others": "no",
      "description": "Inexpensive traditional barbers, no appointment needed.",
      "name": "RJ's",
      "opening_hours": "Mo-Sa 09:00-17:00",
      "payment:lightning": "yes",
      "payment:lightning_contactless": "yes",
      "payment:onchain": "yes",
      "phone": "+44 7812 919857",
      "shop": "hairdresser",
      "survey:date": "2022-10-14"
    },
    "timestamp": "2022-10-14T10:27:01Z",
    "type": "node",
    "uid": 16971158,
    "user": "nathan_day",
    "version": 11
  },
  "created_at": "2022-09-25T08:45:08Z",
  "updated_at": "2022-10-14T10:33:31Z",
  "deleted_at": ""
}

I tried running myObject === JSON.parse(JSON.stringify(myObject)) as suggested in the other issue and it returned false. Is there something else in my Object that is causing this error and the function referenced in the error message is unrelated? Even if that is the case why is the setItem actually completing successfully when an error is being thrown?

Please let me know if you need any more, thanks!

EDIT: Including the code snippet from the place I am calling localForage at:

localforage
	.setItem('elements', newElements)
	.then(function (value) {
		// set updated elements to store
		elements.set(newElements);

		// display data refresh icon on map
		mapUpdates.set(true);
	})
	.catch(function (err) {
		//elementError.set(
		//'Could not update elements locally, please try again or contact BTC Map.'
		//);
		console.log(err);
	});

[crowers]

Just a thought - could it be the colons in the "addr:city" property names?