Как загрузить компонент vue из другого файла (webpack)?

Question

[castetus]

Здравствуйте все, сегодня попробовал использовать компоненты Vue.
Не понимаю, как импортировать компонент из другого файла с помощью вебпака.
index.js:

import comp from './components/component.vue'

Vue.component('comp', comp);

let app = new Vue({
vuetify,

components: {
    comp
  },

component.vue:

<template>
  <div>{{message}}</div>
</template>
 
<script>
export default {
  data () {
    return {
      message: 'test'
    }
  }
}
</script>

В разметке выводит

Что я недопонял про компоненты? Или про вебпак?

Upd: не заметил, что в первоначальном вопросе не вставилось то, что выводится в разметке вместо компонента. Вот оно:

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

Comments

[Алексей Ярков]

Дичь какая-то. Код явно не полный. Что не так и что вы ожидали?

[castetus]

Код неполный конечно, только то, что имеет отношение к компоненту. Ожидал - что по тегу в разметке отобразится template. Так я понял документацию.

Answer 1

[woneorb]

попробуй не регистрировать компонент в index.js, просто заимпортить,
и убери у new Vue свойство components: {}, так может получиться

Comments

[castetus]

Не, не помогает. Вообще, у меня ощущение, что вебпак не кладет код компонента в сборку.
Вот конфиг:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');

module.exports = {
    mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
       test: /\.vue$/,
       loader: 'vue-loader'
     },
     {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedSyntax: true // optional
          },
          options: {
            implementation: require('sass'),
            sassOptions: {
              fiber: require('fibers'),
              indentedSyntax: true // optional
            },
          },
        },
      ],
    },
    ]
 },
   plugins: [
    new VueLoaderPlugin(),  // Array of plugins to apply to build chunk
    new HtmlWebpackPlugin({
        template: __dirname + "/index.html",
        inject: 'body'
    }),
],
 resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
};

А кто-нибудь знает, что вообще значит вывод в разметке вместо компонента вот этого:

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

[woneorb]

попробуй так: const { VueLoaderPlugin } = require('vue-loader');
также убери эту строку в index.js: Vue.component('comp', comp);

[castetus]

Консоль: "vue.esm.js:629 [Vue warn]: Failed to mount component: template or render function not defined."
Погуглил, у этой ошибки примерно миллион причин :(
Все-таки дело в вебпаке/лоадере, думаю. В index.js компоненты работают отлично.

[woneorb]

скинь полный код index.js и компонента
консоль ссылается на какой из этих файлов?
(справа сверху указывается имя файла, в котором найдена ошибка,
нажми и посмотри на на какой строке подсвечивается ошибка или скинь скрин)

в webpack.config повторяется:
(не думаю что дело в этом, но попробовать стоит)

{
       test: /\.vue$/,
       loader: 'vue-loader'
},

[castetus]

woneorb спасибо огромное за помощь, дело было действительно в двойном вызове лоадера

{
       test: /\.vue$/,
       loader: 'vue-loader'
},

Глаз замылился уже, пока с версиями воевал :(
Напишите ответом, я отмечу решением.