Vue file with compilation error

[igmacedom]

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed

💥 Demo Page

Does not apply. Error in NPM package using Vite packager

Explanation

• What is the expected behavior? Run compilation of any Vue 3 application without compilation error on latest version of NodeJS/NPM and Vite

• What is happening instead? Compilation error occurs on line 2 of the dist/tagify.vue file due to the use of v-model="value". Replacing with v-bind="value" fixes the error, however, a second error happens on line 7 because tagify.min.js does not exist in the folder. Replacing with import Tagify from "./tagify.esm.js" fixes the error.

• What error message are you getting?

  1. [vite:vue] [plugin vite:vue] node_modules/@yaireo/tagify/dist/tagify.vue (2:49): v-model cannot be used on a prop, because local prop bindings are not writable. Use a v-bind binding combined with a v-on listener that emits update:x event instead.
  2. error during build: Could not resolve "./tagify.min.js" from "node_modules/@yaireo/tagify/dist/tagify.vue" file: C:/projectpath/node_modules/@yaireo/tagify/dist/tagify.vue

Functional file

<template v-once>
  <textarea v-if="mode === 'textarea'" v-bind="value"/>
  <input v-else :value="value" v-on:change="onChange">
</template>

<script>
import Tagify from "./tagify.esm.js"
import "./tagify.css"

export default {
  name: "Tags",
  props: {
    mode: String,
    settings: Object,
    value: [String, Array],
    onChange: Function
  },
  watch: {
    value(newVal, oldVal) {
      this.tagify.loadOriginalValues(newVal)
    },
  },
  mounted() {
    this.tagify = new Tagify(this.$el, this.settings)
  }
};
</script>

[ilogus]

Same there using blade + vite with version : "@yaireo/tagify": "^4.27.0"

Error: Missing "./src/tagify" specifier in "@yaireo/tagify" package

Code used :

import Tagify from '@yaireo/tagify';

try {
  window.Tagify = Tagify;
} catch (e) {}

export { Tagify };

import in scss file :

@import '@yaireo/tagify/src/tagify';