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

Question

[AgentToxa]

Написан простой однофайловый компонент на 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'

Как правильно собирать однофайловые компоненты, чтобы потом подключать и использовать их в других проектах?

Comments

[Сергей delphinpro]

.babelrc отключите модули

{
  "presets": [
    [
       "env",
       { "modules": false }
    ]
  ],
...
}

Answer 1

[Дмитрий Беляев]

попробуйте добавитьlibraryExport: 'default'в секцию output

Comments

[AgentToxa]

Та же ситуация..

[Дмитрий Беляев]

AgentToxa, webpack ворнинг кидает или вообще не работает?

[AgentToxa]

Дмитрий Беляев, кидает warning. проект запускается, то компонент не работает адекватно. (отображается, но событие не отрабатывает). А в консоли получается следующая ошибка:
client.js:113 [nuxt] Error while initializing app TypeError: Cannot assign to read only property 'exports' of object '#'

[Дмитрий Беляев]

AgentToxa, хм, а какие лоадеры отрабатывают на подключаемый файл в подключающем бандле?
еще как вариант - убрать плагин "transform-export-default" из бабеля, и переложить это на webpack

[AgentToxa]

Дмитрий Беляев, в подключающем проекте используются следующие сборщики:

[ { test: /\.vue$/,
    loader: 'vue-loader',
    options: { productionMode: false, transformAssetUrls: [Object] } },
  { test: /\.pug$/, oneOf: [ [Object], [Object] ] },
  { test: /\.jsx?$/,
    exclude: [Function: exclude],
    use: [ [Object] ] },
  { test: /\.css$/, oneOf: [ [Object], [Object] ] },
  { test: /\.less$/, oneOf: [ [Object], [Object] ] },
  { test: /\.sass$/, oneOf: [ [Object], [Object] ] },
  { test: /\.scss$/, oneOf: [ [Object], [Object] ] },
  { test: /\.styl(us)?$/, oneOf: [ [Object], [Object] ] },
  { test: /\.(png|jpe?g|gif|svg)$/, use: [ [Object] ] },
  { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: [ [Object] ] },
  { test: /\.(webm|mp4|ogv)$/, use: [ [Object] ] },
  { enforce: 'pre',
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    exclude: /(node_modules)/ } ]

[AgentToxa]

Дмитрий Беляев, плагин перенёс, всё также

[Дмитрий Беляев]

AgentToxa, вот отсюда бы Object увидеть:

{ test: /\.jsx?$/,
    exclude: [Function: exclude],
    use: [ [Object] ] }

[AgentToxa]

[ { loader: 'babel-loader',
    options: { babelrc: false, cacheDirectory: true, presets: ['/home/anton/www/dev/test-file-manager/node_modules/@nuxtjs/babel-preset-app/index.js',
    { buildTarget: 'client' } ]] } 
  } 
]

[Дмитрий Беляев]

тут коммент от Сергей delphinpro навел на мысль...
у Вас же еще в самом конфиге webpack пресеты для бабеля задаются:

loader: 'babel-loader',
          options: {
            presets: 'env'
          }

попробуйте так:

loader: 'babel-loader',
          options: {
            presets: [['env', {modules: false}]]
          }

[Сергей delphinpro]

Дмитрий Беляев, о, а я и не заметил. У него в двух местах пресеты задаются. Я не помню приоритетность, но лучше бы оставить что-то одно — либо конфиг, либо .babelrc

[AgentToxa]

Сергей delphinpro, изменил, но всё по-прежнему)

[Дмитрий Беляев]

AgentToxa, хм... надо дебажить тогда...
могу разве что еще поделится своим опытом с подобной ошибкой:
была у меня не так давно задача ручного управления подгрузкой модулей (встроенные средства webpack по разбиению на чанки не подходили)
но в подгружаемых модулях были зависимости, дублирующее зависимости ядра.
решал я это ладером, который подменял дублирующие зависимости, на их экземпляр из ядра.
так вот, так как оригинальные зависимости были es6-modules - webpack упорно пытался работать с ними как с es6-modules, не взирая на то, что генерируемый код был common.js - и как следствие кидал ворнинги на любой импорт из таких зависимостей.
решил я проблему генерацией es6-modules вместо common-js

так что можно накидать лоадер и назначить его к Вашим собранным частям.
достаточно будет:

module.exports = function myLoader(content) {
  this.callback(null,  'export default ' + content);
}