Cannot use Vue component library with npm link

Question

I am building a Vue application and a Vue component library at the same time. So, I would like to setup the library with npm link so I don't have to keep publishing my library package and re-install it in my main application.

My package will be called @company/vue. I can publish it to npm and install/use it in my Vue app like this:

import Vue from 'vue';
import VueComponents from '@company/vue';

Vue.use(VueComponents);

And that works fine. I can access the components in my .vue files and all that.

However, if I follow the standard steps to linking my library:

1. cd path/to/library
2. npm link
3. cd path/to/application
4. npm link @company/vue

Upon starting dev mode, I get this warning:

export 'default' (imported as 'VueComponents') was not found in '@company/vue'

And of course, nothing in the page loads.

I have to imagine that I'm possibly bundling it wrong?

My build script looks like this:

vue-cli-service build --no-clean --target lib --name company-vue src/index.js

And my index.js that it refers to:

import './index.scss';

import * as components from './components/index.js';

const CompanyVue = {
    install(Vue) {
        if (this.installed) {
            return;
        }

        this.installed = true;
        for (let name in components) {
            Vue.use(components[name]);
        }
    }
};

let GlobalVue = null;

if (typeof window !== 'undefined') {
    GlobalVue = window.Vue;
}
else if (typeof global !== 'undefined') {
    GlobalVue = global.Vue;
}

if (GlobalVue) {
    GlobalVue.use(Plugin);
}

export * from './components';
export default CompanyVue;

This is just the standard way I've seen most libraries do it. And again, it works fine if I pull the package from npm.

This is the stuff related to my bundling in my package.json:

"files": [
  "dist",
  "src",
  "!src/**/*.spec.js",
  "!src/**/*.stories.js"
],
"main": "./dist/company-vue.common.min.js",
"module": "./dist/company-vue.umd.min.js",
"browser": "./dist/company-vue.umd.min.js",
"unpkg": "./dist/company-vue.umd.min.js"

And finally, my babel config for the component library:

module.exports = {
    presets: ['@babel/preset-env'],
    env: {
        test: {
            presets: [[
                '@babel/preset-env',
                {
                    targets: { node: "current" }
                }
            ]]
        }
    }
}

Answer 1

i found a solution in this issue:

just add this to your vue.config.js in your project:

 configureWebpack: {
    resolve: {
        symlinks:false //npm link
    },
}