Vue module is not compiling

Question

I am following a YouTube tutorial, Todo List App with Laravel and Vue.js and 27 minutes I come across the following problem when running in the terminal 'npm run hot':

webpack compiled with 1 error ERROR in ./resources/js/app.js 4:0-28 Module not found: Error: Can't resolve './vue/app' in 'C:\xampp\htdocs\todolist2\resources\js'

The problem occurs on file app/resources/js/app.js

require('./bootstrap');
import Vue from 'vue'

import App from './vue/app'

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

File structure is

js ---vue/app.vue app.js

I have run npm install beforehand and Vue is in the app/node_modules folder

Any ideas on how I can fix? Thank you!

I didn't understand about app/node_modules path. Do you mean your node_modules folder is inside the app folder, not in the root path? — Emtiaz Zahid

Adil Islambekov Adil Islambekov · Accepted Answer · 2021-01-20T01:50:33

In your webpack.mix.js add .vue() in the end like this

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

Vue module is not compiling

1 Answers