@AgentToxa

Как исправить ошибку при попытке подключить собранный vue компонент: "export 'default' was not found in?

Написан простой однофайловый компонент на Vue JS. Интерес в том, чтобы его собрать при помощи Webpack в один исполняемый файл js, который можно потом подключать при помощи import в других vue компонентах.
К примеру, вот наш компонент test.vue:

<template>
  <div @click="clickButton">TEST</div>
</template>

<script>
  export default {
    name: 'test',

    methods: {
      clickButton () {
        console.log('на кнопку нажали')
      }
    }
  }
</script>

при помощи Webpack собираю его в test.js.
Вот конфигурация webpack:

"use strict"

var path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: {
    test: './src/components/test.vue'
  },
  output: {
    path: path.resolve(__dirname, './lib/components'),
    publicPath: '/lib/',
    filename: '[name].js',
    chunkFilename: '[id].js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          preserveWhitespace: false
        }
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: 'env'
          }
        },
        exclude: /node_modules/
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}


Файл успешно собирается в test.js. Пытаюсь в другом проекте подключить его:
import test from 'path/test_project/lib/components/test.'

export default {
  name: "my_page",
  data () {
    return {}
  },
  components: {
    test
  }
}


Файл: .babelrc :
{
  "presets": [["es2015", { "loose": true }]],
  "plugins": [
    "transform-export-default"/*,
    "add-module-exports" */
  ]
}


Пытаюсь запустить проект. И получаю ошибку:
"export 'default' (imported as 'test') was not found in 'path/test_project/lib/components/test'

Как правильно собирать однофайловые компоненты, чтобы потом подключать и использовать их в других проектах?
  • Вопрос задан
  • 6658 просмотров
Пригласить эксперта
Ответы на вопрос 1
bingo347
@bingo347
Crazy on performance...
попробуйте добавитьlibraryExport: 'default'в секцию output
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы