Grid and TreeGrid: Uncaught TypeError: Cannot read property 'length' of und

I have a lot of these errors:

Uncaught TypeError: Cannot read property 'length' of undefined
    at Object.grid.$connector.clear (gridConnector.js:686)
    at Object.eval (eval at jt (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:975), <anonymous>:3:15)
    at jt (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:975)
    at it (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:931)
    at gt (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:557)
    at Pq (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:478)
    at lr.mr [as W]
 (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:983)
    at eA (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:866)
    at Rq (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:978)
    at fr.gr [as D]
 (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:983)
    at Bj (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:411)
    at Jq (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:979)
    at Kq (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:963)
    at Ws.Ys [as qb]
 (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:983)
    at IA.JA [as K]
 (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:983)
    at XMLHttpRequest.<anonymous> (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:571)
    at sb (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:425)
    at vb (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:850)
    at XMLHttpRequest.<anonymous> (client-3B1D64116B46DEBA7ADE32AB75416693.cache.js:589)

When such an error occurs strange things happen:

  • Empty rows in Grid
  • Duplicate rows in TreeGrid

I tried various versions of Vaadin Flow but this always happens.

Does this also happen on Vaadin versions prior to V14? How do I reproduce the issue (some code snippet would be really helpful)?

Yes it also happens in V13 and probably in older version.

I’m using Vaading to generate the UI based on the database metamodel. I didn’t manage to reproduce it in a simple application.
But I will keep on trying.

For me it would be very helpful to know how to debug such an issue. So I can investigate the problem myself.

I am getting this error along with Cannot read property ‘style’ of undefined on V13. In my case, this happens on a multi-select grid when I populate with selections. Example below:

// Lazy load dataprovider

this.dataProvider = new CommodityDataProvider(service).withConfigurableFilter();

// Select each commodities

UI.getCurrent().access(() -> group.getCommodities().forEach(grid::select));

I re-tested this several times and the outcome is as Simon stated. However, if you scroll up and down the grid long enough the data eventually shows up correctly. UI threading issue?