Issue with path to config file


#1

So I created a confgi file for vue-editor package, inside this file I have a configuration array which I export into my component, however after I run npm run watch I get the following error:

Module not found: Error: Can't resolve './config/vue-editor.js' in 'C:\xampp\htdocs\Costadog6\resources\js\components\admin\faqs'

My config file path is like this inside laravel:

resources/js/config/vue-editor.js

This is how I’m importing the file:

import { ToolBarConfig } from './config/vue-editor.js';

Why am I getting an error, what path should I use?

My config file:

export const ToolBarConfig = [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ 'header': 1 }, { 'header': 2 }],              
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],
    [{ 'indent': '-1'}, { 'indent': '+1' }],
    [{ 'direction': 'rtl' }],
    [{ 'size': ['small', false, 'large', 'huge'] }],
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'color': [] }, { 'background': [] }],
    [{ 'align': [] }],
    ['clean']
];

and my full component justi in case:

<template>
<transition name="modal-fade">
<section class="modal_overlay_maincontainer" @click.self="hideModal()">
    <form class="modal_container">
        <i class="modal_close fa fa-times-circle" title="Cerrar" @click="hideModal()"></i>
        <h2 class="modal_title">Editar pregunta</h2>
        <div class="horizontal_centered_gradient_line"></div>
        <div class="modal_inputs_container">
            <div class="modal_input_column_container">
                <label class="modal_input_label">Pregunta:</label>
                <vue-editor class="modal_input_textarea" v-model="modalPayload.question" :editorToolbar="customToolbar"></vue-editor>
            </div>
            <div class="modal_input_column_container">
                <label class="modal_input_label">Respuesta:</label>
                <vue-editor class="modal_input_textarea" v-model="modalPayload.answer" :editorToolbar="customToolbar"></vue-editor>
            </div>
        </div>
        <div class="horizontal_centered_gradient_line"></div>
        <div class="modal_buttons_container">
            <button class="modal_button boot_blue" type="button" @click="onGetEditFaqData()">Guardar</button>
            <button class="modal_button boot_greyer" type="button" @click="hideModal()">Cancelar</button>
        </div>
    </form>
</section>
</transition>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapActions } from 'vuex';
import { VueEditor } from 'vue2-editor';
import { ToolBarConfig } from './config/vue-editor.js';
export default {

name: 'FaqsEditModal',
   
mounted() {
    console.log(this.$options.name + ' component succesfully mounted');
},

data() {
    return {
        customToolbar: ToolBarConfig
    }
},

computed:{
    ...mapState('Faqs', ['loadingStatus']),
    ...mapState('AdminModal', ['modalPayload'])
},

methods:{

    ...mapActions('Faqs', ['editFaq']),
    ...mapActions('AdminModal', ['hideModal']),

    onGetEditFaqData() {
                
        let faq = { id: this.modalPayload.id, question: this.modalPayload.question, answer: this.modalPayload.answer };
        this.editFaq(faq);
    }



}

}
</script>
<!--STYLES-->
<style scoped>
</style>

#2

Just as the error says, it cannot find the module at the specified location: 'C:\xampp\htdocs\Costadog6\resources\js\components\admin\faqs'.

If you’re importing it in \components\admin\faqs, but the file is located at /config/vue-editor.js and you’re using a relative path ./ then how do you expect it to find the file?

import { ToolBarConfig } from '../../../config/vue-editor.js';