Level 102
show the contents of the file that fails
/resources/js/components/irp/admin/EditGroup.vue
Oct 15, 2021
5
Level 8
how to solve this error : Module parse failed: Unexpected token (1:0)
Hello ,
After running npm run watch I see this error :
ERROR in ./resources/js/components/irp/admin/EditGroup.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|
|
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.options({
processCssUrls: true,
purifyCss: false,
terser: {
terserOptions: {
compress: {
drop_console: true,
}
}
}
});
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.browserSync('testlocal.com');
if (mix.inProduction()) {
mix.version();
}
app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~font-awesome/scss/font-awesome';
// Icons
@import '~simple-line-icons/scss/simple-line-icons';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
// Coreui
@import '~@coreui/coreui-pro/scss/coreui';
@import '~@coreui/icons/scss/coreui-icons';
// Variables
@import 'variables';
Level 8
Thanks @Sinnbeck
<template>
<div class="card w-100">
<!-- Modal -->
<div aria-hidden="true"
aria-labelledby="groupModalLabel"
class="modal fade"
id="groupModal"
ref="gModal"
role="dialog"
tabindex="-1">
<div role="document" v-bind:class="{'modal-lg':modalLarge, 'modal-dialog':true}">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="groupModalLabel">{{ modalTitle }}</h5>
<button aria-label="Close" class="close" data-dismiss="modal" ref="closeModal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" v-if="actionButton==='allMembersList'">
<div class="row">
<div class="col-8">
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Search"
autocomplete="off"
v-model="modalContent.membersOptions.texts.filter"
v-on:keyup.enter="customFilter( modalContent.membersOptions.texts.filter, 'allMembersTable')">
<div class="input-group-append">
<button class="btn btn-secondary"
type="button"
@click="customFilter(modalContent.membersOptions.texts.filter, 'allMembersTable')">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div class="col-4">
</div>
</div>
<v-client-table :columns="modalContent.membersColumns"
:data="modalContent.membersRows"
:options="modalContent.membersOptions"
id="allMembersTable"
ref="allMembersTable">
<button :disabled="findInMembers(row.id)"
class="btn btn-square btn-success align-center"
slot="actions" slot-scope="{row}"
type="button"
v-on:click="addMembersToList(row)"
>Add
</button>
</v-client-table>
</div>
<div class="modal-body" v-if="actionButton==='allPermissionsList'">
<div class="row">
<div class="col-8">
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Search"
autocomplete="off"
v-model="modalContent.permissionsOptions.texts.filter"
v-on:keyup.enter="customFilter( modalContent.permissionsOptions.texts.filter, 'allPermissions')">
<div class="input-group-append">
<button class="btn btn-secondary"
type="button"
@click="customFilter(modalContent.permissionsOptions.texts.filter, 'allPermissions')">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div class="col-4">
</div>
</div>
<v-client-table :columns="modalContent.permissionsColumns"
:data="modalContent.permissionsRows"
:options="modalContent.permissionsOptions"
ref="allPermissions"
id="allPermissions">
<button :disabled="findInPermissions(row.id)"
class="btn btn-square btn-success align-center"
slot="actions" slot-scope="{row}"
type="button"
v-on:click="addPermissionsToList(row)"
>Add
</button>
</v-client-table>
</div>
<div class="modal-body" v-if="actionButton==='saveConfirmation'">
<div class="row">
<div class="col-sm">Group name: {{ group.name }}</div>
</div>
<div class="row" v-if="memberAdded.length>0">
<div class="col-sm">Add {{ memberAdded.length }}
member{{ (memberAdded.length > 1) ? 's' : '' }}
</div>
</div>
<div class="row" v-if="memberDeleted.length>0">
<div class="col-sm">Delete {{ memberDeleted.length }}
member{{ (memberDeleted.length > 1) ? 's' : '' }}
</div>
</div>
<div class="row" v-if="permissionAdded.length>0">
<div class="col-sm">Add {{ permissionAdded.length }}
permission{{ (permissionAdded.length > 1) ? 's' : '' }}
</div>
</div>
<div class="row" v-if="permissionDeleted.length>0">
<div class="col-sm">Delete {{ permissionDeleted.length }}
permission{{ (permissionDeleted.length > 1) ? 's' : '' }}
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary btn-square" data-dismiss="modal" type="button">Close</button>
<button @click="save()" class="btn btn-primary btn-square"
data-dismiss="modal"
type="button"
v-if="actionButton==='saveConfirmation'">Yes
</button>
</div>
</div>
</div>
</div>
<div class="card-body">
<nav class="nav nav-tabs" id="myTab" role="tablist">
<a aria-controls="nav-home" @click="setFocusGroup" aria-expanded="true" class="nav-item nav-link active"
data-toggle="tab"
href="#nav-group"
id="nav-group-tab" role="tab">
<i class="fa fa-users"></i> Group
</a>
<a aria-controls="nav-profile" @click="setFocusMembers" class="nav-item nav-link" data-toggle="tab"
href="#nav-members"
id="nav-members-tab"
role="tab">
<i class="fa fa-user"></i> Members ({{ memberscount }})
<span class="badge float-right badge-danger badge-pill btn-square">{{ memberDeleted.length }}</span>
<span class="badge float-right badge-success badge-pill btn-square">{{ memberAdded.length }}</span>
</a>
<a aria-controls="nav-profile" @click="setFocusPermissions" class="nav-item nav-link" data-toggle="tab"
href="#nav-permissions"
id="nav-permissions-tab" role="tab">
<i class="fa fa-unlock-alt"></i> Permissions ({{ permissionscount }})
<span
class="badge float-right badge-danger badge-pill btn-square">{{ permissionDeleted.length }}</span>
<span
class="badge float-right badge-success badge-pill btn-square">{{ permissionAdded.length }}</span>
</a>
</nav>
<div class="tab-content" id="nav-tabContent">
<div aria-labelledby="nav-group-tab" class="tab-pane fade show active" id="nav-group" role="tabpanel">
<div class="row">
<div class="col-sm-4">
<label for="groupName">Group</label>
<input aria-describedby="passwordHelpBlock"
ref="groupName"
class="form-control"
id="groupName"
type="text"
v-model="group.name">
<small class="form-text text-danger"
v-for="message in invalidUpdateMsg.name">
{{ message }}
</small>
</div>
</div>
</div>
<div aria-labelledby="nav-members-tab" class="tab-pane fade" id="nav-members" role="tabpanel">
<div class="row">
<div class="col-8">
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Search"
autocomplete="off"
v-model="membersOptions.texts.filter"
v-on:keyup.enter="customFilter( membersOptions.texts.filter, 'membersTable')">
<div class="input-group-append">
<button class="btn btn-secondary"
type="button"
@click="customFilter(membersOptions.texts.filter, 'membersTable')">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div class="col-4">
</div>
</div>
<p class='spaceBetweenTableAndSearchBar'></p>
<v-client-table :columns="membersColumns"
:data="membersRows"
:options="membersOptions"
ref="membersTable"
id="membersTable">
<span slot="actions" slot-scope="{row}">
<button class="btn btn-square btn-danger btn-sm"
type="button"
v-on:click="deleteMemberFromList(row)"
>
<i aria-hidden="true" class="fa fa-times"></i> Delete
</button>
</span>
</v-client-table>
<div class="row">
<div class="col-sm-12">
<button class="btn btn-square btn-success pull-left"
data-target="#groupModal"
data-toggle="modal"
type="button"
v-on:click="showAllMembersList()"
><i aria-hidden="true" class="fa fa-plus"></i> Add Members
</button>
</div>
</div>
</div>
<div aria-labelledby="nav-permissions-tab" class="tab-pane fade" id="nav-permissions" role="tabpanel">
<div class="row">
<div class="col-8">
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Search"
autocomplete="off"
v-model="permissionsOptions.texts.filter"
v-on:keyup.enter="customFilter( permissionsOptions.texts.filter, 'permissionsTable')">
<div class="input-group-append">
<button class="btn btn-secondary"
type="button"
@click="customFilter(permissionsOptions.texts.filter, 'permissionsTable')">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div class="col-4">
</div>
</div>
<p class='spaceBetweenTableAndSearchBar'></p>
<v-client-table :columns="permissionsColumns"
:data="permissionsRows"
:options="permissionsOptions"
ref="permissionsTable"
id="permissionsTable">
<span slot="actions" slot-scope="{row}">
<button class="btn btn-square btn-danger btn-sm"
type="button"
v-on:click="deletePermissionFromList(row)"
>
<i aria-hidden="true" class="fa fa-times"></i> Delete
</button>
</span>
</v-client-table>
<div class="row">
<div class="col-sm-12">
<button class="btn btn-square btn-success pull-left"
data-target="#groupModal"
data-toggle="modal"
type="button"
v-on:click="showAllPermissionsList()"
><i aria-hidden="true" class="fa fa-plus"></i> Add permission
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer modal-footer">
<button class="btn btn-secondary btn-square" type="button" v-on:click="cancel()">Cancel</button>
<button class="btn btn-square btn-primary" data-target="#groupModal"
data-toggle="modal"
type="button"
v-on:click="saveConfirmation()"
><i aria-hidden="true" class="fa fa-floppy-o"></i> Save all
</button>
</div>
</div>
</template>
<script>
export default {
name: "EditGroup",
props: ['groupId'],
data() {
return {
group: {},
invalidUpdateMsg: {},
memberscount: 0,
memberDeleted: [],
memberAdded: [],
permissionscount: 0,
permissionDeleted: [],
permissionAdded: [],
modalTitle: "modal title",
modalContent: {},
modalLarge: false,
actionButton: '',
membersColumns: ['last_first_name', 'email', 'actions'],
membersRows: [],
membersOptions: {
orderBy: {'column': 'last_first_name'},
texts: {
filter: "",
filterBy: 'Filter {column}',
},
pagination: {chunk: 10, dropdown: false},
filterByColumn: false,
perPageValues: [5, 10, 25, 50, 100],
perPage: 10,
filterable: false,
headings: {
email: 'Email',
actions: "Actions",
last_first_name: "Full name"
},
templates: {
fullName: function (h, row, index) {
return row.last_name + ' ' + row.first_name;
}
},
},
permissionsColumns: ['name', 'short_description', 'actions'],
permissionsRows: [],
permissionsOptions: {
orderBy: {'column': 'name'},
filterByColumn: false,
texts: {
filter: "",
filterBy: 'Filter {column}',
},
pagination: {chunk: 10, dropdown: false},
perPageValues: [5, 10, 25, 50, 100],
perPage: 10,
filterable: false,
headings: {
name: 'Permission',
short_description: 'Short description',
actions: "Actions"
},
},
}
},
mounted() {
this.getGroup(this.groupId);
$(this.$refs.gModal).on("hide.bs.modal", this.clearFilter);
this.$refs.groupName.focus();
$(this.$refs.addNewEvaluationModal).on("shown.bs.modal", this.addNewEvaluationSetFocus);
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$("input:text:visible:first").focus();
})
},
methods: {
setFocusGroup() {
this.$refs.groupName.focus();
},
setFocusMembers() {
},
setFocusPermissions() {
},
wait(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
},
async customFilter(searchKey, tableName) {
let table = this.$refs[tableName];
table.query = searchKey;
await this.wait(100);
table.setPage(1);
if (table.totalPages <= 1) $("<p class='spaceBetweenTableAndSearchBar'></p>").insertBefore(".table-responsive");
else {
$("#" + tableName).find(".spaceBetweenTableAndSearchBar").remove();
}
$("#" + tableName).find("div.VueTables__limit-field > label").remove();
},
moveTableRowsPerPageDown(elementID) {
$("#" + elementID).find("div.VuePagination").addClass("p-0 m-0");
$("#" + elementID).find(".VueTables__limit").appendTo($("#" + elementID).find(".VuePagination"));
$("#" + elementID).find("div.VuePagination > div").removeClass("form-group form-inline pull-right VueTables__limit").addClass("ml-auto");
$("#" + elementID).find("div.VueTables__limit-field > label").remove();
if (this.$refs[elementID].totalPages <= 1) $("<p class='spaceBetweenTableAndSearchBar'></p>").insertBefore($("#" + elementID).find(".table-responsive"));
else {
$("#" + elementID).find(".spaceBetweenTableAndSearchBar").remove();
}
},
clearFilter() {
if (typeof (this.$refs.allMembersTable) !== 'undefined') this.$refs.allMembersTable.setFilter('');
if (typeof (this.$refs.allPermissions) !== 'undefined') this.$refs.allPermissions.setFilter('');
},
findInPermissions(permissionId) {
return (
this.permissionsRows.filter(function (obj) {
return obj.pivot.permission_id === permissionId;
}).length > 0
);
},
deletePermissionFromList(element) {
this.permissionsRows = this.permissionsRows.filter(function (obj) {
return obj.pivot.permission_id !== element.pivot.permission_id;
});
if (this.permissionAdded.includes(element.pivot.permission_id)) {
this.permissionAdded = this.permissionAdded.filter(function (item) {
return item !== element.pivot.permission_id
});
} else if (!this.permissionDeleted.includes(element.pivot.permission_id)) this.permissionDeleted.push(element.pivot.permission_id);
},
addPermissionsToList(element) {
this.permissionsRows.push({
name: element.name,
pivot: {
group_id: this.groupId,
permission_id: element.id
},
short_description: element.short_description
});
this.modalContent.permissionsRows = this.modalContent.permissionsRows.filter(function (obj) {
return obj.id !== element.id;
});
if (this.permissionDeleted.includes(element.id)) {
this.permissionDeleted = this.permissionDeleted.filter(function (item) {
return item !== element.id
});
} else if (!this.permissionAdded.includes(element.id)) this.permissionAdded.push(element.id);
},
async showAllPermissionsList() {
this.modalLarge = true;
this.actionButton = 'allPermissionsList';
this.modalTitle = 'Add permissions';
this.modalContent = {
permissionsColumns: ['name', 'short_description', 'actions'],
permissionsRows: [],
permissionsOptions: {
orderBy: {'column': 'name'},
filterByColumn: false,
perPageValues: [5, 10, 25, 50, 100],
perPage: 5,
texts: {
filter: "",
filterBy: 'Filter {column}',
},
pagination: {chunk: 10, dropdown: false},
filterable: false,
headings: {
name: 'Permission',
short_description: 'Short description',
actions: "Action"
},
},
};
axios.get(`/api/permissions`)
.then(response => {
this.modalContent.permissionsRows = response.data.filter((obj) => {
return !this.findInPermissions(obj.id);
});
}).then(resp => {
$("#allPermissions").find(".spaceBetweenTableAndSearchBar").remove();
//$("div.VueTables__limit-field > label").remove();
})
await this.wait(100);
this.moveTableRowsPerPageDown('allPermissions');
},
findInMembers(memberId) {
return (
this.membersRows.filter(function (obj) {
return obj.pivot.user_id === memberId;
}).length > 0
);
},
deleteMemberFromList(element) {
this.membersRows = this.membersRows.filter(function (obj) {
return obj.pivot.user_id !== element.pivot.user_id;
});
if (this.memberAdded.includes(element.pivot.user_id)) {
this.memberAdded = this.memberAdded.filter(function (item) {
return item !== element.pivot.user_id
});
} else if (!this.memberDeleted.includes(element.pivot.user_id)) this.memberDeleted.push(element.pivot.user_id);
},
addMembersToList(element) {
this.membersRows.push({
last_first_name: element.name,
pivot: {
group_id: this.groupId,
user_id: element.id
},
email: element.email
});
this.modalContent.membersRows = this.modalContent.membersRows.filter(function (obj) {
return obj.id !== element.id;
});
if (this.memberDeleted.includes(element.id)) {
this.memberDeleted = this.memberDeleted.filter(function (item) {
return item !== element.id
});
} else if (!this.memberAdded.includes(element.id)) this.memberAdded.push(element.id);
},
async showAllMembersList() {
this.modalLarge = true;
this.actionButton = 'allMembersList';
this.modalTitle = 'Add members';
this.modalContent = {
membersColumns: ['last_first_name', 'email', 'actions'],
membersRows: [],
membersOptions: {
orderBy: {'column': 'last_first_name'},
filterByColumn: false,
perPageValues: [5, 10, 25, 50, 100],
perPage: 5,
texts: {
filter: "",
filterBy: 'Filter {column}',
},
pagination: {chunk: 10, dropdown: false},
filterable: false,
headings: {
last_first_name: 'Full name',
email: 'Email',
actions: "Action"
},
templates: {},
},
};
axios.get(`/api/members`)
.then(response => {
this.modalContent.membersRows = response.data.filter((obj) => {
obj.last_first_name = obj.last_name + ' ' + obj.first_name;
return !this.findInMembers(obj.id);
})
})
.then(resp => {
$("#allMembersTable").find(".spaceBetweenTableAndSearchBar").remove();
$("div.VueTables__limit-field > label").remove();
})
.catch((error) => {
// error
})
await this.wait(100);
this.moveTableRowsPerPageDown('allMembersTable');
},
getGroup(groupId) {
axios.get(`/api/groups/` + groupId)
.then(response => {
this.group = response.data[0];
this.membersRows = this.group.users.filter(function (obj) {
obj.last_first_name = obj.last_name + ' ' + obj.first_name;
return obj;
});
this.permissionsRows = this.group.permissions;
this.memberscount = this.group.users.length;
this.permissionscount = this.group.permissions.length;
})
},
saveConfirmation() {
this.modalLarge = false;
this.actionButton = 'saveConfirmation';
this.modalTitle = 'Are you sure to save the modifications bellow?';
},
save() {
axios.post('/api/groups/' + this.groupId,
{
name: this.group.name,
membersAddList: this.memberAdded,
membersDeleteList: this.memberDeleted,
permissionsAddList: this.permissionAdded,
permissionsDeleteList: this.permissionDeleted,
_method: 'patch'
}
)
.then((response) => {
//console.log(response.data);
this.group = response.data.group[0];
this.membersRows = this.group.users;
this.permissionsRows = this.group.permissions;
this.memberscount = this.group.users.length;
this.permissionscount = this.group.permissions.length;
this.memberAdded = [];
this.memberDeleted = [];
this.permissionAdded = [];
this.permissionDeleted = [];
this.groupUpdatedConfirmation();
window.location.href = '/groups';
})
.catch(error => {
if (error.response.status === 422) {
this.invalidUpdateMsg = error.response.data.errors;
//console.log(this.invalidUpdateMsg.name);
}
})
},
cancel() {
window.location.href = '/groups?group=' + this.groupId;
},
}, notifications: {
groupUpdatedConfirmation: {
title: 'Group',
message: 'Group updated with success',
type: 'success',
timeout: 2000
}
}
}
</script>
<style scoped>
</style>
Level 29
@godzilaravel Which version of Laravel-Mix you are using?
https://laravel.com/docs/8.x/mix#vue
https://laravel-mix.com/docs/6.0/vue
Maybe you have forgotten .vue()
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.browserSync('testlocal.com');
1 like
Level 8
@frankielee indeed! the problem was in .vue()
Thanks
Level 1
In order to solve this error Either You need to downgrade the babel/core packages Or you need to downgrade the babel packages will fix your error You can read more about solution at here
Please or to participate in this conversation.