Custom block type broken after Kirby 3.5 -> 3.6 upgrade

Kirby 3 Solved ✅
,
#1

I created a custom HTML5 video block plugin which worked flawlessly until upgrading from 3.5 to the latest stable version.

This is the error I get when trying to create a new block:
this.$refs[("block-" + t.id)][0] is undefined

And this is shown for block fields already containing such a block type:
t is undefined.

This is the plugin code:

panel.plugin("foxacid/html5video-block", {
  blocks: {
    html5video: {
      computed: {
        placeholder() {
          return "Upload a Video …";
        },
        src() {
          if (this.content.video[0] && this.content.video[0].url) {
            return this.content.video[0].url;
          }

          return false;
        },
        poster() {
          if (this.content.poster[0] && this.content.poster[0].url) {
            return this.content.poster[0].url;
          }

          return false;
        },
      },
      template: `
      <k-block-figure
        :caption="this.content.videocaption"
        :empty-text="'Upload a video …'"
        :is-empty="!src"
        empty-icon="video"
        @open="open"
        @update="update"
      >
      <template v-if="src">
        <video
          class="k-block-type-html5video"
          :poster="poster"
        >
        <source :src="src" type="video/mp4">
        </video>
      </template>
      </k-block-figure>
      `
    }
  }
});

Any pointers are much appreciated!

#2

Is there a stack trace in your console?

#3 
TypeError: t is undefined
    video https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/index.js:1
    video https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/index.js:1
    get https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    evaluate https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    xn https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    yg https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/index.js:1
    _render https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    r https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    get https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    vn https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    mount https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    $mount https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    $mount https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    init https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    f https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    f https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    v https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    f https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    v https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    f https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    qo https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    _update https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    r https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    get https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    vn https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    mount https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    $mount https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    $mount https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    init https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    f https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    f https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    b https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    _ https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    _ https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    qo https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    _update https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    r https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    get https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    run https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    dn https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    te https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    Ut https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
index.js:1:221186
TypeError: this.$refs[("block-" + t.id)][0] is undefined
    open https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/index.js:1
    focusOrOpen https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/index.js:1
    add https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/index.js:1
    te https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6
    Ut https://localhost/media/panel/4310ccda5fcf929d9c8d73ce54bde096/js/vendor.js:6

does that help?

#4

No, that’s pretty useless ;). It would be better to test this with the unminified version (npm run dev).

Edit: Oh, you are probably not using a build workflow… Do you get anything more useful if you click on index.js?

#5

Yes, sorry I was lazy and just put this together without a build workflow.

What do you mean by “click on index.js”?

#6

Ah, you mean in the debug window… :smiley:

I guess that just shows the source code (at least in FF)

#7

Do you think setting up a build routine for this would help?

#8

It should actually work without a build routine. Just a wild guess because I can’t get it to work at all in my setup without removing the 5 from filenames/preview etc.

#9

You are incredible. That fixed it indeed. Is that a bug or should there be no alphanumeric characters in those filenames?

#10

I don’t know. If it worked before, it’s definitely a regression.

#11

I see. Many thanks for the quick and efficient help!