laravel and vuejs project it shows the error "Module not found: Error: Can't resolve './vue/app' in 'C:\vue\todolist\resources\js"

Question

The app.vue file cannot found in app.js. My Laravel version is "8.31.0" and vuejs version is "^2.6.12" Please help me out.

app.js is

require('./bootstrap');

import Vue from 'vue';
import App from './vue/app';

const app = new Vue({
    el: '#app',
    components: { App }
});

app.vue is:

<template>
    <div>
        Hello
    </div>
</template>
<script>
export default {
    
}
</script>

<style scoped>

</style>

webpack.mix.js is:

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Answer 1

I just add .vue after app file import, so it is like import App from './vue/app.vue';

and I think you will have error again like this : Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

so This is the solution : How to fix the error "You may need an appropriate loader to handle this file type"

Answer 2

The problem get solved. I run the command "npm run watch" instead of "npm run dev" and it get compiled successfully. I was supposed to take care on this question after the issue get solved. Sorry for the let response.