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'
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!
VS Code automatically added in your code line like:
import func from 'vue-editor-bridge'
Find it in your code and remove it. Done!
I faced this problem too, and it happens because, instead of typing complete function in the code, I used the autocomplete version of function which was func and as func is a totally different thing in Vue, as compared to function, Vue just put import func from 'vue-editor-bridge'.
Just change the word func to function and remove this import inside the script tag and it will be ok.
That's how it works for me.