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'

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? — Terry
– Terry, Commented Jan 24, 2021 at 22:24

Yurii Space · Accepted Answer · 2021-06-29 17:45:57Z

15

VS Code automatically added in your code line like:

import func from 'vue-editor-bridge'

Find it in your code and remove it. Done!

answered Jun 29, 2021 at 17:45

Yurii Space

2052 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sever van Snugg Over a year ago

It's the same answer as mine.

Sever van Snugg · Accepted Answer · 2021-08-11 09:10:52Z

13

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!

edited Aug 11, 2021 at 9:10

answered Feb 4, 2021 at 10:54

Sever van Snugg

7235 silver badges16 bronze badges

Comments

Manas Mishra · Accepted Answer · 2021-08-29 04:30:44Z

1

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.

answered Aug 29, 2021 at 4:30

Manas Mishra

793 bronze badges

Comments

Robel · Accepted Answer · 2022-10-15 22:26:27Z

1

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

edited Oct 15, 2022 at 22:26

answered Oct 15, 2022 at 22:07

Robel

92 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related