Client-side error in mount-01d35dc3.js

[rmorshea]

Discussed in #488

^{Originally posted by jgburford August 30, 2021}
When using IDOM 0.32.0 I'm getting the following error in the browser console:

Uncaught (in promise) TypeError: undefined has no properties
    applyOperation http://127.0.0.1:8000/client/_snowpack/pkg/common/index-6ddd8323.js:322
    move http://127.0.0.1:8000/client/_snowpack/pkg/common/index-6ddd8323.js:151
    applyOperation http://127.0.0.1:8000/client/_snowpack/pkg/common/index-6ddd8323.js:304
    applyPatch http://127.0.0.1:8000/client/_snowpack/pkg/common/index-6ddd8323.js:343
    applyPatchInplace http://127.0.0.1:8000/client/_snowpack/pkg/common/mount-01d35dc3.js:193
    applyPatch http://127.0.0.1:8000/client/_snowpack/pkg/common/mount-01d35dc3.js:378
    onmessage http://127.0.0.1:8000/client/_snowpack/pkg/common/mount-01d35dc3.js:442

This error text is from the Firefox console. Chrome also produces a similar error.

I've included the code I'm using below.

Background: I'm using IDOM to experiment with linguistics-related software, specifically new approaches for working with parallel corpuses -- source and translated works, side by side, or in this case, on top of one another. There are two panes (WorkSentDiv), each displaying a single sentence in one of the works, and each having buttons to move forward and backward through the sentences. The works dict contains dummy corpus data to be loaded in each of the panes. The RangeWords component allows segments of the sentences to be highlighted.

How to reproduce the error:

In the top pane, continue clicking the "Next" button. After initial load, whenever the sentence id reaches 3, the next click of "Next" always produces the error. The client side fails to update, but the server-side state (sid) shows as updated.

At this point, clicking the "Next" button in the bottom pane causes the interface to update.

Continuing to move back and forth in the upper pane, its text becomes mangled.

import idom
import random

@idom.component
def RangeWords(text):
    highlight_range, set_highlight_range = idom.hooks.use_state([])
    
    def update_range(index):
        if highlight_range == []:
            set_highlight_range([index])
        elif highlight_range == [index]:
            set_highlight_range([])
        elif index in [highlight_range[-1], highlight_range[0]]:
            set_highlight_range([index])
        elif index < highlight_range[0]:
            set_highlight_range(list(range(index, highlight_range[0] + 1)))
        else:
            set_highlight_range(list(range(highlight_range[0], index + 1)))
    
    divs = [
        idom.html.div({
                'onClick': lambda e, i=i: update_range(i),
                'style': {
                    'backgroundColor': 'aquamarine' if i in highlight_range else 'white',
                    'display':'inline',
                    'padding':'5px'
                }
            },
            word,
            key=str(random.random())
        )
        for i,word in enumerate(text.split())
    ]
    
    return idom.html.div({
        'style': {
            'width':'95%',
            'display':'flex',
            'flex-wrap':'wrap',
            'margin':'5px'}
        },
        divs
    )

@idom.component
def WorkSentDiv(tfname):
    
    sid, set_sid = idom.hooks.use_state(0)
    
    works = {'bubs': ["it was the best of times, it was the blurst of times.",
                  "they will break upon this fortress like water on rock.",
                  "ah those heady days of yore.",
                  "forge ahead, no matter the cost.",
                  "bring me the head of alfredo garcia.",
                  "there were monsters aboard that ship, and truly we were them."],
         'zugzug': ["나도너도나도 웰웰웰 아하아하.",
                   "섬웨어 오버 더 레인보.",
                   "유 캔트 듀 댓 온 테레비즌.",
                   "컴퓨터 프로그램잉.",
                   "어메이징 테일즈.",
                   "대츠 오케이!",
                   "데르즈 노 비지니스 라이크 쇼 비지니스"]}
    
    def get_stext(tfname, sid):
        if sid < len(works[tfname]): 
            return works[tfname][sid]
        else:
            return "no more sentences"

    
    
    def btn_click(count):
        if sid + count < 0:
            return
        
        set_sid(sid + count)
    
    return idom.html.div(
        idom.html.div(f"sentence id: {sid}"),
        idom.html.button({'onClick': lambda e:btn_click(-1)}, "Prev"),
        idom.html.button({'onClick': lambda e:btn_click(1)}, "Next"),
        RangeWords(get_stext(tfname, sid))
    )

@idom.component
def DualWorkView():
    return idom.html.div(
        WorkSentDiv("bubs"),
        WorkSentDiv("zugzug")
    )


idom.run(DualWorkView)</div>

[rmorshea]

Found the problem. This mechanism for applying a JSON patch at a particular path does not work because all the operations applied to the document assume they are at the root. Thus in order to do this properly, we'd need to modify all the paths used in the operations too.

The solution is to just grab a reference to the document at the given path, and apply the patch there which we did in the past.