sweet-modal-vue gives “Failed to mount component: template or render function not defined”

Question

I'm trying to build a very simple vue app that displays a modal. I'm using sweet-modal-vue. I am using webpack to bundle my app, primarily so that I can easily import sweet-modal-view into my app.

Something is breaking somewhere in the process and whenever I open my index.html file I get this error:

Failed to mount component: template or render function not defined. Found in <SweetModal>

After looking for a solution I found almost everyone who had this problem solved it by aliasing vue to the full compiler build, as described here. This did not work for me.

Any help would be greatly appreciated, I've been banging my head against this for hours.

Versions:

Vue: 2.8.2
sweet-modal-vue: 5.3.0
Webpack: 3.4.1

Here are the relevant files, let me know if you'd like to see more:

main.js:

import Vue from 'vue';
import App from './app.vue';
import { SweetModal, SweetModalTab } from 'sweet-modal-vue';

new Vue({
  el: '#myapp',
  components: {
    SweetModal,
    SweetModalTab,
    App
  },
  data: {
    message: "Hello Vue"
  },
  methods: {
    openModal: function() {
        console.log(SweetModal);
        this.$refs.modal.open();
    }
  }
})

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue Example</title>
  </head>
  <body>
    <div id="myapp">
        <app></app>
        <h3>{{ message }}</h3>
        <sweet-modal ref="modal" icon="success">
            This is a success!!
        </sweet-modal>
        Accurate
        <button v-on:click="openModal()">Modal</button>
    </div>
  </body>
  <script src="dist/build.js"></script>
</html>

webpack.config.js

module.exports = {
  // This is the "main" file which should include all other modules
  context: __dirname,
  entry: __dirname + '/src/main.js',
  // Where should the compiled file go?
  output: {
    // To the `dist` folder
    path: __dirname + '/dist',
    publicPath: 'dist/',
    // With the filename `build.js` so it's dist/build.js
    filename: 'build.js'
  },
  module: {
    // Special compilation rules
    rules: [
      {
        // I tried this option as well, it didn't help
        // test: /\.vue$/,
        // loader: 'vue-loader',
        // options: {
        //   loaders: {
        //     // {{#sass}}
        //     // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
        //     // the "scss" and "sass" values for the lang attribute to the right configs here.
        //     // other preprocessors should work out of the box, no loader config like this necessary.
        //     'scss': 'vue-style-loader!css-loader!sass-loader',
        //     'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
        //     // {{/sass}}
        //   }
        //   // other vue-loader options go here
        // }
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
            loaders: {
                // Customize to your liking
                js: 'babel-loader',
                scss: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {'vue$': 'vue/dist/vue.esm.js'}
  }
}

If I understand your question, I do not have a vue template, but sweet-modal-vue, the plugin I am using does have a .vue file in its internals. — lnhubbell
In your index.html try removing the <sweet-modal> html tag, do you get any errors? — bntzio
@bntz if I remove the <sweet-modal> tag I do not get any errors. — lnhubbell

lnhubbell lnhubbell · Accepted Answer · 2017-08-03T16:51:01

The issue was resolved by using a different modal package, there was something wrong with the sweet-modal-vue package itself.

If you're interested in following the problem, here is the github issue.

sweet-modal-vue gives “Failed to mount component: template or render function not defined”

1 Answers