Page MenuHomePhabricator

"Uncaught TypeError: this.$refs.wrapper is undefined" when vistiting tool detail page
Closed, ResolvedPublicBUG REPORT

Description

I haven't been able to figure out which widget is causing this, but when I view a tool's detail screen (/tool/{name}) in my dev environment this is logged to the error console three times:

Uncaught TypeError: this.$refs.wrapper is undefined
    scrollIntoView VSlideGroup.js:284
    setWidths VSlideGroup.js:363
    setWidths VSlideGroup.js:353
    onResize VSlideGroup.js:232
    inserted index.js:13
    VueJS 20
        callHook$1
        callInsert
        wrappedHook
        invokeWithErrorHandling
        invoker
        invokeInsertHook
        patch
        _update
        updateComponent
        get
        run
        flushSchedulerQueue
        nextTick
        flushCallbacks
        promise callback*timerFunc
        nextTick
        queueWatcher
        update
        notify
        reactiveSetter
    init vue-router.esm.js:2932
    init vue-router.esm.js:2931
    updateRoute vue-router.esm.js:2352
    transitionTo vue-router.esm.js:2206
    confirmTransition vue-router.esm.js:2340
    step vue-router.esm.js:1944
    step vue-router.esm.js:1951
    runQueue vue-router.esm.js:1955
    confirmTransition vue-router.esm.js:2335
    step vue-router.esm.js:1944
    step vue-router.esm.js:1948
    iterator vue-router.esm.js:2322
    resolveAsyncComponents vue-router.esm.js:2105
    iterator vue-router.esm.js:2300
    step vue-router.esm.js:1947
    step vue-router.esm.js:1951
    step vue-router.esm.js:1951
    runQueue vue-router.esm.js:1955
    confirmTransition vue-router.esm.js:2330
    transitionTo vue-router.esm.js:2203
    handleRoutingEvent vue-router.esm.js:2523
    setupListeners vue-router.esm.js:2529
    setupListeners vue-router.esm.js:2920
    transitionTo vue-router.esm.js:2207
    confirmTransition vue-router.esm.js:2340
    step vue-router.esm.js:1944
    step vue-router.esm.js:1951
    runQueue vue-router.esm.js:1955
    confirmTransition vue-router.esm.js:2335
    step vue-router.esm.js:1944
    step vue-router.esm.js:1948
    iterator vue-router.esm.js:2322
    resolve vue-router.esm.js:2070
    once vue-router.esm.js:2146
VSlideGroup.js:284
    scrollIntoView VSlideGroup.js:284
    scrollIntoView self-hosted:1177
    setWidths VSlideGroup.js:363
    (Async: FrameRequestCallback)
    setWidths VSlideGroup.js:353
    setWidths self-hosted:1177
    onResize VSlideGroup.js:232
    onResize self-hosted:1177
    inserted index.js:13
    VueJS 20
    init vue-router.esm.js:2932
    forEach self-hosted:206
    init vue-router.esm.js:2931
    updateRoute vue-router.esm.js:2352
    transitionTo vue-router.esm.js:2206
    confirmTransition vue-router.esm.js:2340
    step vue-router.esm.js:1944
    step vue-router.esm.js:1951
    runQueue vue-router.esm.js:1955
    confirmTransition vue-router.esm.js:2335
    step vue-router.esm.js:1944
    step vue-router.esm.js:1948
    iterator vue-router.esm.js:2322
    resolveAsyncComponents vue-router.esm.js:2105
    iterator vue-router.esm.js:2300
    step vue-router.esm.js:1947
    step vue-router.esm.js:1951
    step vue-router.esm.js:1951
    runQueue vue-router.esm.js:1955
    confirmTransition vue-router.esm.js:2330
    transitionTo vue-router.esm.js:2203
    handleRoutingEvent vue-router.esm.js:2523
    (Async: EventListener.handleEvent)
    setupListeners vue-router.esm.js:2529
    setupListeners vue-router.esm.js:2920
    transitionTo vue-router.esm.js:2207
    confirmTransition vue-router.esm.js:2340
    step vue-router.esm.js:1944
    step vue-router.esm.js:1951
    runQueue vue-router.esm.js:1955
    confirmTransition vue-router.esm.js:2335
    step vue-router.esm.js:1944
    step vue-router.esm.js:1948
    iterator vue-router.esm.js:2322
    resolve vue-router.esm.js:2070
    once vue-router.esm.js:2146

My first thought was that this might be related to scrollBehavior handler in vue/src/router/index.js, but logging statements there do not show before the errors. The only explict v-slide-group that we are using is in components/search/Filters.vue and only rendered on the search results screen at breakpoints below md.

It seems like there must be some compound widget in vue/src/views/Tool.vue that is causing this (and 3 instances of it).

Event Timeline

bd808 changed the subtype of this task from "Task" to "Bug Report".Mar 24 2021, 12:17 AM

I think this error may be triggered by the <v-chip-group> components that are used in the toolinfo detail display. The error count I see varies based on the number of groups that are on the particular toolinfo detail (keywords, tech used, sponsor, for wiki, ...). Setting my browser's dev tools to break on exceptions, I can see that the exception is happening as the chip group attempts to react to be being re-displayed by ensuring that any selected chips in the group are visible on screen. This looks like an upstream bug, but hopefully we can find a way to work around it.

Change 678434 had a related patch set uploaded (by BryanDavis; author: Bryan Davis):

[wikimedia/toolhub@main] ui: Replace v-chip-group with plain div

https://gerrit.wikimedia.org/r/678434

bd808 moved this task from Backlog to Review on the Toolhub board.

Change 678434 merged by jenkins-bot:

[wikimedia/toolhub@main] ui: Replace v-chip-group with plain div

https://gerrit.wikimedia.org/r/678434