Constant reloading of the extension

[doutatsu]

I've just started setting up the template, but I've hit an issue of the vite server doing a non-stop reloading, as can be seen below

constant-reload.mp4

The only changes I've done to the template:

1. Installed pug, tailwindcss, postcss, sass
2. Remove all instances of windiss
3. Setup TailwindCSS as per their instructions for Vite
4. Created my own custom component and then included it in the popup

I can confirm that not loading the component in popup, doesn't resolve in constant reloading. But I have no idea why this would cause it

The component in question looks like this:

<template lang="pug">
button(
  :type='type'
  :class='classes'
  :disabled='disabled'
  @click="$emit('click')"
)
  slot
</template>

<script>
  export default {
    props: {
      type: {
        type: String,
        default: 'button',
      },
      colour: {
        type: String,
        default: 'primary',
      },
      size: {
        type: String,
        default: 'md',
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['click'],
    computed: {
      classes() {
        return {
          'btn-primary': this.colour === 'primary',
          'btn-success': this.colour === 'success',
          'btn-secondary': this.colour === 'secondary',
          'btn-info': this.colour === 'info',
          'btn-warn': this.colour === 'warning',
          'btn-danger': this.colour === 'danger',
          'btn-upgrade': this.colour === 'upgrade',
          'btn-xl': this.size === 'xl',
          'btn-lg': this.size === 'lg',
          'btn-md': this.size === 'md',
          'btn-sm': this.size === 'sm',
          'btn-xs': this.size === 'xs',
          disabled: this.disabled,
        };
      },
    },
  };
</script>

<style lang="scss" scoped>
  button {
    @apply inline-flex items-center px-2.5 py-1.5 border border-transparent;
    @apply text-xs font-medium rounded-md shadow-sm w-full flex justify-center;

    @apply focus_outline-none focus_ring-2 focus_ring-offset-2;
  }

  .btn-secondary {
    @apply border-gray-300 bg-white text-gray-700;
    @apply hover_text-gray-500;
    @apply focus_outline-none focus_ring-blue-300;

    @apply dark_bg-gray-400 dark_bg-opacity-20 dark_text-gray-300;
    @apply dark_border-transparent;

    @apply dark_hover_bg-opacity-30 dark_hover_text-gray-200;
    @apply dark_focus_ring-opacity-10 dark_focus_ring-offset-gray-500;
  }

  .btn-primary {
    @apply border-transparent bg-blue-600 text-white;
    @apply hover_bg-blue-500;
    @apply focus_outline-none focus_ring-blue-300;

    @apply dark_bg-blue-600 dark_bg-opacity-30 dark_text-blue-300;
    @apply dark_hover_bg-opacity-40;
    @apply dark_focus_ring-opacity-10 dark_focus_ring-offset-blue-600;
  }

  .btn-success {
    @apply border-transparent bg-el-green text-white;
    @apply hover_bg-el-green-light;
    @apply focus_outline-none focus_ring-green-300;

    @apply dark_bg-green-600 dark_bg-opacity-20 dark_text-green-400;
    @apply dark_hover_bg-green-600 dark_hover_bg-opacity-40;
    @apply dark_focus_ring-opacity-10 dark_focus_ring-offset-green-600;
  }

  .btn-upgrade {
    @apply bg-gradient-to-r from-purple-600 to-blue-600 text-white;
    @apply border-transparent;
    @apply hover_from-purple-500 hover_to-blue-500;

    &:focus {
      @apply outline-none ring-purple-300;
    }
  }

  .btn-info {
    @apply border-transparent bg-gray-500 text-white;
    @apply hover_bg-gray-400;
    @apply focus_outline-none focus_ring-gray-300;

    @apply dark_bg-gray-400 dark_bg-opacity-50 dark_text-gray-300;
    @apply dark_border-transparent;

    @apply dark_hover_bg-opacity-60 dark_hover_text-gray-200;
    @apply dark_focus_ring-opacity-10 dark_focus_ring-offset-gray-400;
  }

  .btn-warn {
    @apply border-transparent bg-yellow-400 text-white;
    @apply hover_bg-yellow-300;
    @apply focus_outline-none focus_ring-yellow-300;

    @apply dark_bg-yellow-500 dark_bg-opacity-20 dark_text-yellow-400;
    @apply dark_border-transparent;

    @apply dark_hover_bg-opacity-40 dark_hover_text-yellow-200;
    @apply dark_focus_ring-opacity-10 dark_focus_ring-offset-yellow-400;
  }

  .btn-danger {
    @apply border-transparent bg-red-600 text-white;
    @apply hover_bg-red-500;
    @apply focus_outline-none focus_ring-red-300;

    @apply dark_bg-opacity-25 dark_text-red-500;
    @apply dark_hover_bg-red-600 dark_hover_bg-opacity-40;
    @apply dark_focus_ring-opacity-10 dark_focus_ring-offset-red-700;
  }

  .disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  .btn-xl {
    @apply px-6 py-3 text-base leading-6;
  }

  .btn-lg {
    @apply px-4 py-2 text-base leading-6;
  }

  .btn-md {
    @apply px-4 py-2 text-sm leading-5;
  }

  .btn-sm {
    @apply px-3 py-2 text-sm leading-4;
  }

  .btn-xs {
    @apply px-2.5 py-1.5 text-xs leading-4;
  }
</style>