Maplibre source.updateData error on Cypress tests (source.setData works OK)

[zxwild]

Maplibre raises error when tests are running in Cypress.
Error occurs when you're trying to call source.updateData({ add: features }).

It seems it's related to iframes which Cypress uses, I see similar issues in mapbox github, but it seems it's fixed already at least for setData (or no one used updateData yet).

Error looks like this and the source isn't updated after the error:

commands.ts:33 Error: can't serialize object of unregistered class Object
    at Ii (maplibre-gl.js?v=f0371aba:3127:26)
    at Ii (maplibre-gl.js?v=f0371aba:3137:63)
    at maplibre-gl.js?v=f0371aba:7823:138
    at new Promise (<anonymous>)
    at t.F.sendAsync (maplibre-gl.js?v=f0371aba:7816:20)
    at J.<anonymous> (maplibre-gl.js?v=f0371aba:10283:45)
    at Generator.next (<anonymous>)
    at maplibre-gl.js?v=f0371aba:54:46
    at new Promise (<anonymous>)
    at Object.e [as _] (maplibre-gl.js?v=f0371aba:33:18)

Basically, in Cypress tests:

// this works OK
source.setData({
  type: 'FeatureCollection',
  features: data,
});

// this raises: "Error: can't serialize object of unregistered class Object"
source.updateData({ add: data });

maplibre-gl: 4.5.2
browser: latest chrome

I've implemented github repository to demonstrate:
https://github.com/zxwild/maplibre-cypress

1. npm install
2. npm run test

Expected behavior: ability to use source.updateData() in Cypress tests without errors.

[HarelM]

Can you reproduce this error without Cypress?
I'm using Cypress for ngx-maplibre-gl and maputnik and they are working fine (although the above is not included in those tests I believe).

[zxwild]

@HarelM I'll try to create an iframe for the map and check for errors without Cypress tests.
Actually I use source.updateData intensively, but I haven't seen any errors before Cypress tests implementing.

The demo implements the only command basically, so I don't think it could be related to something else.
The mapbox issue relates to cypress too with such error.
mapbox/mapbox-gl-js#8287

[HarelM]

I would suggest to write the data in the test file to see if it passes, loading data from files in Cypress might cause issues (although setData works...) IDK...

[zxwild]

@HarelM Just checked, this fails the same way with "Error: can't serialize object of unregistered class Object"

source.updateData({
  add: {
    id: 1,
    type: 'Feature',
    properties: {},
    geometry: {
      type: 'Point',
      coordinates: [
        -7.064208984375142,
        54.908263583510376,
      ],
    },
  },
});

upd: it should be add: [{...}], but it doesn't matter, it fails the same way this case

[HarelM]

This is where the data is begin sent:

maplibre-gl-js/src/source/geojson_source.ts

Line 338 in 76a01c1

const result = await this.actor.sendAsync({type: MessageType.loadData, data: options});

This is where the error is thrown:

maplibre-gl-js/src/util/web_worker_transfer.ts

Line 178 in 76a01c1

throw new Error(`can't serialize object of unregistered class ${input.constructor.name}`);

It seems that this should by object and instead this gets a class of type Object, I don't know what's causing this though...

[zxwild]

Just checked how source.updateData works when maplibre is located inside an iframe, - all is OK.
https://github.com/zxwild/maplibre-cypress/tree/iframe-test

The source has been updated and I see valid geojson in source.getData.

source.getData().then((data) => {
  console.log('Source data', data);
});

So it seems it's something cypress specific.