Webpack fails to mount Vue components

Question

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' } ]
  }
}

user_5578846 · Answer

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://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

user_11578308 · Answer

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.

user_621827 · Answer

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.

Webpack fails to mount Vue components

4 Answers