While attempting to implement lazy-loading for a module within my custom Vue application, I encountered a problem.
The structure of my routes is derived from a database, and one of them pertains to displaying programs for children. In this program view, I have multiple components being loaded such as lists of clients and consents.
This is how it currently looks:
<div role="tabpanel" class="tab-pane" :class="{'active': current_tab == 'consent'}" id="consent" v-if="displayConsentComponent">
<consent v-model="consents" :edit="edit"></consent>
</div>
// Components are imported like this:
<script>
import Consent from './_consents';
import AssignedStaff from './_assigned-staff';
......
export default {
components:{
Consent,
AssignedStaff,
.....
},
data(){
return {
..........
}
}
}
</script>
I wanted to modify it according to your method, so I made the following changes:
<div role="tabpanel" class="tab-pane" :class="{'active': current_tab == 'consent'}" id="consent" v-if="displayConsentComponent">
<consent v-model="consents" :edit="edit"></consent>
</div>
// Updated imports:
<script>
const Consent = () => import('./_consents');
const AssignedStaff = () => import('./_assigned-staff');
......
export default {
components:{
Consent,
AssignedStaff,
.....
},
data(){
return {
..........
}
}
}
</script>
However, upon making these modifications, my entire application fails to build and run after rebuilding. Alternatively, I receive the following error:
Error Message: Unexpected token (58:8). It seems like an appropriate loader might be required to handle this file type.I've updated all node packages, including Vue to the latest version (2.5.1X), but unfortunately, that did not resolve the issue. Any insights or assistance would be greatly appreciated.
Thank you in advance, Gabriel