RangeError on FeatureTable Widget in Vue.JS

[wolfvincent]

Hi all, I'm implementing the FeatureTable widget in a Vue-app as an ESM-module. The SceneView etc. work fine, but when using the FeatureTable and clicking a layer's item, the console logs a RangeError: 

lang.js?7ffa:5 Uncaught (in promise) RangeError: Maximum call stack size exceeded
at m (lang.js?7ffa:5:1)
at m (lang.js?7ffa:5:1)
at m (lang.js?7ffa:5:1)
at m (lang.js?7ffa:5:1)
at m (lang.js?7ffa:5:1)
at m (lang.js?7ffa:5:1)
at m (lang.js?7ffa:5:1)
at m (lang.js?7ffa:5:1)
at m (lang.js?7ffa:5:1)
at m (lang.js?7ffa:5:1)

Does anyone have a solution to get this working? 🙂 Thanks in advance!

[ReneRubalcava]

If you have a sample github repo, could take a look. Not enough info to tell.

[wolfvincent]

Thanks for the reply, the repo is on private due to my co-workers, but the main thing is that we declare the widget in one component, set is to the store (Vuex) and use it in other components. It works perfect, untill the moment you click a feature in the view. After that, the errors pops...

[ReneRubalcava · Accepted solution]

Are you storing an instance of the Widget or Map in Vuex? You can't do that because Vuex wraps objects in native Proxy (nexted Proxies) and that will break our Accessor in the API. You can store the JSON instance of values or other things are interested in, but JSAPI instances.

Here is a sample Vue application that uses Pinia (similar to Vuex) and only manages non-JSAPI data

https://github.com/odoe/nearby-app

[wolfvincent]

Yes, I store them. Tthat should be it, thanks for updating!