Module not found: Error: Can't resolve '../../../vue-temp/vue-editor-bridge' in 'D:\laravel projects\codeGram\resources\js\components'

Question

i am using laravel + vuejs to do the follow and unfollow button of instagram clone , but i get this error i did everything i could, checked the config.js , deleted the module package and again run the npm install but it didnt work here is my code

<template>
    <div>
    <button class="btn btn-primary ml-4" @click="followUser" v-text="buttonText">Folloq</button>
    </div>
</template>

<script>
import func from '../../../vue-temp/vue-editor-bridge';

    export default {
        props: ['userId', 'follows'],

        watch: {
            status: function() {
                this.buttonText = (this.status) ? 'Unfollow' : 'Follow';
            }
        },

        data: function () {
            return {
                status: this.follows,
                buttonText: this.follows ? 'Unfollow' : 'Follow'
            }
        },

        methods: {
            followUser() {
                 axios.post('/follow/' + this.userId)
                    .then(response => {
                        this.status = ! this.status;

                        console.log(response.data);
                    })
                    
                    .catch(errors => {
                        if (errors.response.status == 401){
                            window.location = '/login';
                        }
                    });
            }
        },
    }
</script>

my code in the view in index.blade.php for the button is

 <follow-button user-id="{{$user->id}}"  follows="{{ $follows }}"></follow-button>

route is Route::post('follow/{user}','App\Http\Controllers\FollowsController@store');

full error

ERROR in ./resources/js/components/FollowButton.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/FollowButton.vue?vue&type=script&lang=js&) 7:0-55 Module not found: Error: Can't resolve '../../../vue-temp/vue-editor-bridge' in 'D:\laravel projects\codeGram\resources\js\components'

Answer 1

I assume you don't want to use this at all:

import func from '../../../vue-temp/vue-editor-bridge';

Vscode imports this 'func' from a module when you want to autocomplete while writing function. This is totally annoying and if anybody knows how to turn it off, you would be my personal hero!

Answer 2

VS Code automatically added in your code line like:

import func from 'vue-editor-bridge'

Find it in your code and remove it. Done!

Answer 3

If you are in vue and your error starts like this 'Module not found: Error: Can't resolve 'http' ...' installing url-loader will do the trick. Just install it using npm. npm install --save-dev url-loader