TypeError: Cannot read properties of undefined (reading 'match')

[AMontagu]

Hello,
Firstly I wanted to say that this is mainly a me issue as I use swappy for the first time in a non-classic setup but the error is hard to understand and outside of the core of Swapy so can't find a way to debug it.

I am using swapy in a vue component looking something like:

<VRow justify="center" align="center" :class="{ 'mb-2': !onlyButton }" ref="swappycontainer">
    <VCol v-if="label" cols="12" class="pb-0">
      <h4 class="mb-0 text--primary--theme">{{ label }} :</h4>
    </VCol>
    <template v-if="multiple && showMediaAsImage">
      <VCol
        v-for="(image, index) in value"
        :key="image"
        cols="4"
        style="position: relative"
        :class="{ 'mt-2': canDelete }"
      >
        <VIcon
          v-if="image && canDelete && !readOnly"
          class="icon-top-right"
          color="error"
          @click="removeFile(index)"
        >
          mdi-close-circle
        </VIcon>
        <VRow class="dropbox" justify="center" align="center" no-gutters>
          <VCol justify="center" align="center" :data-swapy-slot="index">
            <img
              :data-swapy-item="image"
              v-if="image"
              class="image-preview"
              :src="image"
              alt="Dresskare Media"
              @click="openFile(index)"
            />
          </VCol>
        </VRow>
      </VCol>
    </template>
</VRow>

And when creating swapy like this on the mounted method (using vue2 so there is this.$refs instead of a ref):

const swappycontainer = this.$refs.swappycontainer
console.log(swappycontainer)
if (swappycontainer) {
  const swapy = createSwapy(swappycontainer)
  swapy.onSwap(({ data }) => {
    console.log(data)
  })
}

I got the error:

that come from this code chunk (cannot find it in swapy git repo):

function b(r) {
  let t = r.match(/^([\d.]+)([a-zA-Z%]*)$/); // Error in this line not the next one
  t || (t = "0px".match(/^([\d.]+)([a-zA-Z%]*)$/));
  const e = parseFloat(t[1]), i = t[2];
  return { value: e, unit: i, valueWithUnit: r };
}

So I don't know what is undefined and it's hard to debug.

For more information the next two methods in the stacktrace are:

function he(r, t) {
  const [e, i] = r.split(" "), s = b(e), n = b(i);
  return new le(
    s.value / t.width,
    n.value / t.height
  );
}

get origin() {
    return he(
      this._computedStyle.transformOrigin,
      this._rect.size
    );
  }

[AMontagu]

I have the same error using this simple template:

<template>
  <div class="container" ref="swappycontainer">
    <div class="slot a"
      data-swapy-slot="1">
      <p  data-swapy-item="a">AAAAAA</p>
    </div>
    <div class="second-row">
      <div class="slot b"
        data-swapy-slot="2">
        <p  data-swapy-item="b">BBBBBBBBBB</p>
      </div>
      <div class="slot c"
        data-swapy-slot="3">
        <p  data-swapy-item="c">CCCCCCCCCC</p>
      </div>
    </div>
  </div>

[TahaSh]

This should be fixed in Swapy v1.0. Could you please update and try, and let me know if everything works for you! Thanks!

[TahaSh]

Closing this since I haven't heard back. Feel free to reopen it if you're still having issues. Thanks!

[AMontagu]

Hello
I was a little bit overbooked for this end of year but I finally test it and it now work well.
Thank you