Webpack fails to mount Vue components

3
votes

After using Webpack with Vue to compile a project, when I open a page that uses a Vue component I get:

[Vue warn]: Failed to mount component: template or render function not defined.

and in place of the component Vue renders

<-- function (a, b, c, d) { return createElement(vm, a, b, c, d, true); } -->

Why does this error happen?

Note: I've created an MCVE for this problem. The exact Webpack config used is:

module.exports = {
  entry: __dirname + '/display.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [ { test: /\.vue$/, loader: 'vue-loader' } ]
  }
}
4
webpackvue.jsvue-component
Try changing const Vue = require('vue/dist/vue.common.js') to const Vue = require('vue'). See github.com/vuejs/vue-router/issues/713 and vuejs.org/v2/guide/… for details. – ceejayoz
That causes Vue is not a constructor. I've tried all the files in dist as well, none of them work. – RedHatter
Have you considered starting with one of the default templates via vue-cli? github.com/vuejs/vue-cli – ceejayoz

4 Answers

6
votes

It is simply due to change of vue-loader.

Since version 13.0.0, vue-loader doesn’t normalize exports anymore. You have to do
const app = require('./app.vue').default

So just change Child: require('./child.vue') in your display.js to Child: require('./child.vue').default and then it will work.

3
votes

I know it it's old, but someone might run into this problem.

Try adding resolve alias to your webpack config:

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

more about this:

https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

0
votes

I had the same issue using snowpack.

I stumbled upon this question while trying to solve the problem I had, so I guess if anyone is in the same sitiation I was in this might help:

I was using vue 2.6.12 with Import Vue from 'vue'. Like proposed by żyy I added an alias

alias: {
        'vue': 'vue/dist/vue.esm.js',
    },

to snowpack.config.js. This however doesnt quite fix it yet. Im not sure why this doesn't work, but I think it has to do with the fact that snowpack applys the alias after bundling. So you need to force snowpack to also bundle vue/dist/vue.esm.j, which I did by creating a dummy file in my project that will also get bundled:

// _.js:
import Vue from 'vue/dist/vue.esm.js';

let _ = new Vue();

I wouldn't call this a perfect solution, so feel free to suggest a better alternative.

0
votes

My issue was the location of files. I keep my files in this style

ListItem.ts
ListItem.vue
ListItem.scss
index.ts

Problem was I didn't have the files in a list-item directory and was just importing like import ListItem from './components/ListItem'; Moving them in the directory and updating the import to ./compoents/list-item fixed my issue.

One of those darn copy-pasta errors that get ya every time.