Title: Module not found: Error: Can't resolve '../../../vue-temp/vue-editor-bridge' in 'D:\laravel projects\codeGram\resources\js\components'
Tags: node.js;laravel;vue.js
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&gt;
<div&gt;
<button class=&quot;btn btn-primary ml-4&quot; @click=&quot;followUser&quot; v-text=&quot;buttonText&quot;&gt;Folloq</button&gt;
</div&gt;
</template&gt;
<script&gt;
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 =&gt; {
this.status = ! this.status;
console.log(response.data);
})

.catch(errors =&gt; {
if (errors.response.status == 401){
window.location = '/login';
}
});
}
},
</script&gt;
my code in the view in index.blade.php for the button is
<follow-button user-id=&quot;{{$user-&gt;id}}&quot;  follows=&quot;{{ $follows }}&quot;&gt;</follow-button&gt;
route is
Rout75b5:f2c1:f5d7:b954:8dc3:cee9:baf:a8c0post('follow/{user}','App\Http\Controllers\FollowsController@store');
full error
ERROR in ./resources/js/components/FollowButton.vue?vue&amp;type=script&amp;lang=js&amp; (./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&amp;type=script&amp;lang=js&amp;) 7:0-55
Module not found: Error: Can't resolve '../../../vue-temp/vue-editor-bridge' in 'D:\laravel projects\codeGram\resources\js\components'
Comment: can u put your folder structure ?

Comment: The errors tells you that the relative file path does not actually point to a module. What is your directory structure? If you use an IDE, try using the auto-import feature and see if the `import` statement is updated?


Here is another answer: 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!

Here is another answer: 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.

Here is another answer: VS Code automatically added in your code line like:
import func from 'vue-editor-bridge'
Find it in your code and remove it. Done!
Comment for this answer: It's the same answer as mine.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:01/24/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<node.js><laravel><vue.js>', 'Title': "Module not found: Error: Can't resolve '../../../vue-temp/vue-editor-bridge' in 'D:\\laravel projects\\codeGram\\resources\\js\\components'", 'ViewCount': 5158, 'id': 65876196, 'user_AboutMe': '', 'user_AccountId': 17003050.0, 'user_DisplayName': 'coding_girl', 'user_Reputation': 71.0, 'user_Views': 16.0, 'user_id': 12299932.0}}