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.

In such case you can answer your own question to make sure that people with similar problems can use the question and answer to resolve them — klashar
– klashar, Commented Mar 16, 2017 at 8:50
Please rollback the edit to your question and instead post the solution as an answer — Bergi
– Bergi, Commented Mar 17, 2017 at 5:28

tesarwijaya · Accepted Answer · 2017-03-17 07:37:08Z

19

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.

answered Mar 17, 2017 at 7:37

tesarwijaya

3651 gold badge2 silver badges13 bronze badges

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

Comments

Manideep · Accepted Answer · 2018-07-19 18:01:52Z

3

your code :

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

convert to :

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

OR

import AppComponent from '@/app/ index'

After run:

 npm run dev

answered Jul 19, 2018 at 18:01

community wiki

Manideep

Comments

Billal BEGUERADJ · Accepted Answer · 2018-12-11 08:32:41Z

2

I do not know which version you are using, but the following attempts should work -all of them, under the assumption you export Index.vue with name: AppComponent :

import AppComponent from './app/index'
import AppComponent from '~/app/index'
import AppComponent from '@/app/index'

edited Dec 11, 2018 at 8:32

answered Dec 11, 2018 at 7:32

Billal BEGUERADJ

23k45 gold badges125 silver badges142 bronze badges

Comments

Jordao Manguena · Accepted Answer · 2017-09-23 20:02:30Z

1

This problem is very simple to solve and there are many solutions to it, i am going to present two:

install/ reinstall vue-template-compiler and vue-loader npm packages.
if the first solution does not work it means you have many broken or misconfigured npm packages, so run npm install so that it provides warning about all packages that should be installed but could not be, then install these packages and run npm install to see if everything is okay, if not install again the missing/broken packages, repeat the process until all the necessary packages are intalled.

edited Sep 23, 2017 at 20:02

answered Sep 23, 2017 at 19:55

Jordao Manguena

1242 silver badges4 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related