Reactive array throws an error when pushing new values

[ericraider33]

When working with a reactive array, I'm having a problem with pushing new values onto the proxied array. See the two examples below.

If I add a new value by setting via an array index (see the first example), then everything works fine.

However, if I add a new value by using array's push method, then I get the following error:

van-x.js:49 Uncaught TypeError: Cannot create property 'val' on number '4'
at Object.set (van-x.js:49:29)
at Proxy.push ()
at HTMLButtonElement.onclick (van-issue-2.js:13:35)

Despite the error, an entry is indeed added to the array.

import van from "/scripts/lib/van.js"
import * as vanX from "/scripts/lib/van-x.js"
const { div, button } = van.tags;

let modelA = vanX.reactive(['a','b','c']);
let a = div(
    button({onclick: () => { modelA[modelA.length+1] = 'x'; }}, 'Append'),
    vanX.list(div, modelA, i => div(i)) 
    );

let modelB = vanX.reactive(['a','b','c']);
let b = div(
    button({onclick: () => modelB.push('x') }, 'Append'),
    vanX.list(div, modelB, i => div(i))
);

van.add(document.body, div(a,b));

[Tao-VanJS]

This is a minor issue that only appears in the ESM integration of VanX (technically, only <script> and NPM integration of VanX are officially supported). The issue is very minor as only error messages will be logged, with no impact on the actual behavior.

Nonetheless, I just released VanX 0.5.2 which fixed the issue.

Thanks again for reporting!

[ericraider33]

I was able to verify that the issue went away with 0.5.2.

I appreciate the help / quick fix.