Module not found: Error: Can't resolve './app/index.vue' vue.js component import ES6

Question

i am still practicing to use webpack2 with vue js and babel but bumped to this error. i don't know what exactly is missing.

ERROR in ./src/main.js 
Module not found: Error: Can't resolve './app/index.vue' in 'E:\xampp\htdocs\webpack-practice\src'
@ ./src/main.js 3:0-43

it seems the error is coming from the line i try to import vue component here

//file src\main.js
import Vue from 'vue'

import AppComponent from './app/index.vue'

const vm = new Vue({
el: '#app',
components: {
    app: AppComponent,
},
render: h => h('app'),
})

this is my config file

//file webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: './src/main',
output: {
    path: './build',
    filename: 'main.js',
},
module: {
    rules: [
    {
        test: /\.vue$/,
        use: { 
            loader: 'vue'               
        }
    },
    {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    }
    ]
},
plugins: [
    new webpack.LoaderOptionsPlugin({
        vue: {
            loader: {
                js: 'babel-loader'
            }
        }
    })
]
}

i'm pretty sure the import path is valid, here is my folder structure. and already put ./ prefix before the folder name.

 root
 |----index.html
 |----webpack.config.js
 |----app
 |     |----index.vue
 |     |----some file
 |
 |----build
 |     |----main.js
 |
 |----node_modules
 |
 |----src
       |----main.js

what am i missing here? please help, i'm using windows 10 if it's matter.

Answer 1

i have solved my problem, since it seems i can't delete the answer. i'll edit how i solve the problem.

change this part

import AppComponent from './app/index.vue'

to

import AppComponent from '../app/index.vue'

i feel ashame to miss this kind of error.

and change the vue loader after the next error is appear

loader: 'vue'

changed to

loader: 'vue-loader'

then install others needed dependencies suggested by the terminal.