Hi. I got a strange problem related to Tabulator 5 (I think). When I display a tabulator table using the dev server everything works as expected. But, if I build a distribution and make the files available through my own web server only the tabulator header is shown. Then I get the following error in the console:

main.bundle.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at sa (main.bundle.js:2:1720204)
    at new ii (main.bundle.js:2:2579880)
    at hx (main.bundle.js:2:2370990)
    at Rx.toKotlinObj_t5tk2r$ (main.bundle.js:2:2399627)
    at tn.toKotlinObjTabulator_e9s2f4$ (main.bundle.js:2:2554636)
    at tn.fixData_giv383$ (main.bundle.js:2:2554164)
    at Fe.<anonymous> (main.bundle.js:2:2543681)
    at main.bundle.js:2:1366879
    at Array.forEach (<anonymous>)
    at Te._dispatch (main.bundle.js:2:1366854)
sa @ main.bundle.js:2
ii @ main.bundle.js:2
hx @ main.bundle.js:2
Rx.toKotlinObj_t5tk2r$ @ main.bundle.js:2
tn.toKotlinObjTabulator_e9s2f4$ @ main.bundle.js:2
tn.fixData_giv383$ @ main.bundle.js:2
(anonymous) @ main.bundle.js:2
(anonymous) @ main.bundle.js:2
_dispatch @ main.bundle.js:2
dispatchExternal @ main.bundle.js:2
load @ main.bundle.js:2
_loadInitialData @ main.bundle.js:2
_create @ main.bundle.js:2
(anonymous) @ main.bundle.js:2
setTimeout (async)
Re @ main.bundle.js:2
Fe @ main.bundle.js:2
hx @ main.bundle.js:2
tn.createJsTabulator @ main.bundle.js:2
tn.afterInsert_77isfd$ @ main.bundle.js:2
(anonymous) @ main.bundle.js:2
(anonymous) @ main.bundle.js:2
Le.patch_6ju63b$ @ main.bundle.js:2
Tw.reRender_8be2vx$ @ main.bundle.js:2
Tw.singleRender_klfg04$ @ main.bundle.js:2
(anonymous) @ main.bundle.js:2
setTimeout (async)
Tw.singleRenderAsync_o14v8n$ @ main.bundle.js:2
kp.singleRenderAsync_o14v8n$ @ main.bundle.js:2
(anonymous) @ main.bundle.js:2
(anonymous) @ main.bundle.js:2
(anonymous) @ main.bundle.js:2
(anonymous) @ main.bundle.js:2
(anonymous) @ main.bundle.js:2
g.dispatch_dtrwrh$ @ main.bundle.js:2
an.domdbLoadingComplete @ main.bundle.js:2
Gn @ main.bundle.js:2
o.onload @ main.bundle.js:2
load (async)
en @ main.bundle.js:2
Kn @ main.bundle.js:2
an.initialize @ main.bundle.js:2
Kt.start @ main.bundle.js:2
Te.start_x7u0o8$ @ main.bundle.js:2
a @ main.bundle.js:2
(anonymous) @ main.bundle.js:2
main.bundle.js:2 redraw failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.
redraw @ main.bundle.js:2
(anonymous) @ main.bundle.js:2

redraw failed - table not yet initialized. Please wait for the `tableBuilt` event before calling this function.
redraw @ main.bundle.js:2
(anonymous) @ main.bundle.js:2

I guess it can be related to https://github.com/olifolkerd/tabulator/issues/3407, but I do not use setData() in my code. Still using the legacy compiler. Any ideas?

Do you use the current KVision version?

I upgraded to 5.8.2 and I still see the error. Will check more tomorrow.

From your stacktrace I assume your tabulator is using some fallback, legacy-only KVision code to automatically convert javascript data to kotlin objects by copying properties. It was designed only for simple data classes and is generally not recommended anymore, since it's way stable to use serialization. Just make your data model

@Serializable

and pass a

KSerializer<T>

to your Tabulator constructor/builder.

My data model in Tabulator is a

val DomainArr = mutableListOf<ServiceDomain>()

and ServiceDomain:

@Serializable
data class ServiceDomain(
    val name: String,
    val description: String = "",
    val swedishLong: String = "",
    val swedishShort: String = "",
    val owner: String? = null,
    val hidden: Boolean,
    val domainType: DomainType,
    val issueTrackerUrl: String? = null,
    val sourceCodeUrl: String? = null,
    val infoPageUrl: String? = null,
    val interactions: Array<Interaction>? = null, //  = arrayOf<Interaction>(),
    val serviceContracts: List<Contract>? = null, //  = listOf<Contract>(),
    val versions: Array<Version>? = null,
) {
    var domainTypeString: String? = null // Used for filtering in tabulator

    /**
     * The init block verifies and store the accepted domains.
     */
    init {
        if (
            interactions != null &&
            serviceContracts != null &&
            versions != null
        ) {
            DomainMap[this.name] = this
            DomainArr.add(this)
            domainTypeString = domainType.name
        } else {
            if (!this.name.isBlank()) println("${this.name} is incomplete and removed")
        }
    }
}

It is populated through:

val domDb: DomDb = json.decodeFromString(DomDb.serializer(), response)

(where the DomDb class contains a list of <ServiceDomain>. Are there something in this that might cause the problem?

Everything other than simple

val

primitive can cause problems. But as your data model is

@erializable

, just pass the

ServiceDomain.serializer()

to your tabulator component and it should work fine.

Thank you Robert, you are right as always! 🙂 It works when I add the serializer parameter to Tabulator.

what's more, it will also work fine with IR