How to fix parse error during Vue app deployment?

Issue

This Content is from Stack Overflow. Question asked by Vlad

I try to deploy Vue app for uploading on GitHub Pages, but got such parse error:
95:
^
96:
97: <Navbar
error during build:
Error: Parse error @:95:10
at parse$b (file:///C:/Users/User/vContact/vContact/node_modules/vite/dist/node/chunks/dep-a713b95d.js:33668:355)
at Object.transform (file:///C:/Users/User/vContact/vContact/node_modules/vite/dist/node/chunks/dep-a713b95d.js:42856:27)

My code:

<script >
import { RouterLink, RouterView } from "vue-router";
import Navbar from "./components/Navbar.vue";
import Contacts from "./components/Contacts.vue";
import Modal from "./components/Modal.vue";
import AddButton from "./components/AddButton.vue";

export default{
components: {
  Navbar,
  Contacts,
  Modal,
  AddButton
},
data(){
  return {
    currentId: 1,
    modalOpen: false,
     contacts: [],
     edit: false,
     editContact: {},
     search: ''
  }
},
created(){
  this.getContacts()
},
computed: {
  // filterContacts(){
  //   return this.search ? this.contacts.filter(contact => 
  //   contact.fullName.toLowerCase().includes(this.search.toLowerCase())) : 
 this.contacts;
  // },
  filterContacts(){
    return this.search ? 
    this.contacts.filter(contact => {
      for(let key in contact){
        if(String(contact[key]).toLowerCase().includes(this.search.toLowerCase())){
          return contact;
        }
      }
    })
    : this.contacts;
  },
  // filterContactsCategory(){
  //   return this.search ? this.contacts.filter(contact => 
contact.category.toLowerCase().includes(this.search.toLowerCase())) : this.contacts;
  // }
},
methods: {
  openModal(){
    this.modalOpen = true
  },
  closeModal(){
    this.modalOpen = false
    this.edit = false
  },
  addContact(item){
      this.contacts.push(item)
      this.modalOpen = false
  },
  deleteContact(id){
      let index = this.contacts.findIndex(contact => contact.id == id)
      this.contacts.splice(index, 1)
  },
  changeContact(id){
  this.edit = this.modalOpen = true
  let pickedContact = this.contacts.find(contact => contact.id == id)
  this.editContact = pickedContact
  },
  editedContact(contactEdited){
    this.contacts.forEach(contact => {
      if(contact.id == contactEdited.id) {
        contact.fullName = contactEdited.fullName
        contact.phoneNumber = contactEdited.phoneNumber
        contact.email = contactEdited.email
        contact.category = contactEdited.category
      }
    })
  },
  getContacts(){
    const localContacts = localStorage.contacts
    if(localContacts){
      this.contacts = JSON.parse(localContacts)
    }
  }
},
watch: {
  contacts: {
    handler(newContacts){
      localStorage.contacts = JSON.stringify(this.contacts)
       },
      deep: true
    }
  }
}
</script>
<template>
 <Navbar 
 @searchValue="search = $event"
 />
 <Contacts 
 :contacts="filterContacts"
 @delContact="deleteContact" 
 @changeContact="changeContact"
 :search="search"
 />
 <Modal 
 :edit="edit"
 :editContact="editContact"
 @addContact="addContact"
 :currentId="currentId" 
 v-show="modalOpen" 
 @closeModal="closeModal" 
 @editedContact="editedContact"
 />
 <AddButton 
 @openModal="openModal" 
 />
 <RouterView />
</template>



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?