CODEWITHSUNDEEP
webpackvue.js
southpaw93
southpaw93

Reputation: 1961

Webpack cannot resolve module error

So I am trying to compile a vue file. But I am getting the following errorenter image description here

and I don't know why. My main.js file contains the following

// Vue things
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)


// Vue Components
import dashboard from 'components/dashboard-component'

new Vue({
    el: "body",
    components: {
        dashboard
    },
    methods: {
    }
})

and my components folder is in the same folder as main.js. This is my vue component:

<template>
Hello
</template>

<script>
// Exports
export default {
    components: {
        dashboard
    },
    props: {
    },
    data: function (argument) {
    },
    ready() {
    },
    methods: {
    }
}
</script>

which is under components/dashboard-component as index.vue.

What am I doing wrong ?

Thank you.

Upvotes: 1

Views: 3656

Answers (2)

Kane Blueriver
Kane Blueriver

Reputation: 4268

For convinient, I would usual add .vue to resolved extensions Array, and set alias for directories that would be used frequently:

resolve: {
  extensions: ['', '.js', '.vue'],
  fallback: [path.join(__dirname, '../node_modules')],
  alias: {
    'data': path.resolve(__dirname, '../data'),
    'src': path.resolve(__dirname, '../src'),
    'assets': path.resolve(__dirname, '../src/assets'),
    'views': path.resolve(__dirname, '../src/views'),
    'components': path.resolve(__dirname, '../src/components')
  }
},

So I can use import dashboard from 'components/dashboard-component'; in my project.

Upvotes: 2

Hammerbot
Hammerbot

Reputation: 16324

You need to import Vue files. So you need to save your component to components/Dashboard/Dashboard.vue and import it like so:

import Dashboard from './components/Dashboard/Dashboard.vue'

new Vue({
    el: "body",
    components: {
        Dashboard
    },
    methods: {
    }
})

Don't forget the ./ in front of the components folder in order for this to work

Upvotes: 1

Related Questions