What is the exact meaning of this error in VUE?

Hello,

What is the exact meaning of this error:

./src/components/ImageEditor.vue?vue&type=script&lang=js (./node_modules/cache-loader/dist/cjs.js??ref–12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref–0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref–0-1!./src/components/ImageEditor.vue?vue&type=script&lang=js)
Module not found: Error: Can’t resolve ‘@toast-ui/vue-image-editor’ in ‘H:\Vue_Try\VueJSDotnet_Image_12\VueJSDotnet_Try1\ClientApp\src\components’

If this means can find the module, I have installed the module several times?

You can see my structure here:

How can exactly install the new module in VUE?

Thanks,
Saeed

Hey Saeed

Are you sure that you have installed your module in this path?

Because from your files tree ClientApp is not inside those directories

Hello,

No, I’m not sure, Because package.json is inside the ClientApp folder.
So I need to run cd ClientApp.

But when I run this comment that there is no such place. :neutral_face:
Now you think what should I do?

thanks,

You can print your current working directory:

pwd

and then use ls -a to discover what’s around you.
You could also just go to level 0 of the tree and then use:

find -name ClientApp -type d

or something similar to figure out where’s ClientApp

I install the package using:
cd VueJSDotnet_Try1\ClientApp

But In the imageEditor component, there is a blank page!

Here comes the code:

<template>
    <div class="imageEditorApp">
        <tui-image-editor ref="tuiImageEditor"
                          :include-ui="useDefaultUI"
                          :options="options"
                          @addText="onAddText"
                          @objectMoved="onObjectMoved">
        </tui-image-editor>
    </div>
</template>
<script>
    import { ImageEditor } from '@toast-ui/vue-image-editor';

    export default {
        components: {
            'tui-image-editor': ImageEditor
        },
        data() {
            return {
                useDefaultUI: true,
                options: {
                    includeUI: {
                        loadImage: {
                            path: 'sampleImage.png',
                            name: 'SampleImage'
                        },
                        initMenu: 'filter'
                    },
                    cssMaxWidth: 700,
                    cssMaxHeight: 500
                }
            };
        },
        //methods: {
        //    onAddText(pos) {

        //    },
        //    onObjectMoved(props) {

        //    }
        //}
    };
</script>
<style scoped>
    .imageEditorApp {
        width: 1000px;
        height: 800px;
    }
</style>

Do you have any idea why the image editor does not appear?

I don’t know VueJS I’m sorry.

I feel like it’s a problem related to the path where you’re looking for the module however. Unfortunately I can’t be of any further help :frowning: