can't import Vue component built by vue-cli-service

Question

I'm quite new in Vue and maybe my issue is trivial.

What I have to do:

I want to create a Vue component that I can put in a NPM private repo and import it into other projects with a sth like bundle.js file

TLDR:

can't import vue component building by vue-cli-service build --target lib/wc. Importing component I have sth silimar to "export 'HelloWorld' was not found in '../node_modules/hello-world'

long version:

I have asked questions and projects as much as I could. All projects are built by vue-cli without any additional changes.

1. create new default project vue create hello-world
1. by default we havefirst component here - src/component/HelloWorld, and for this example this is component which we want to export
1. using vue-cli-service try to make exportable file.

3a. vue-cli-service build --target lib --name vue-test ./src/components/index.js where index.js is

import Vue from 'vue';
import HelloWorld from './HelloWorld.vue';

const Components = {
    HelloWorld,
};

Object.keys(Components).forEach((name) => {
    Vue.component(name, Components[name]);
});

export default Components;

3b. or directly vue file vue-cli-service build --target wc --name vue-test 'src/components/HelloWorld.vue'

in both scenarios vue-cli-service generates me file in to /dist folder and I want to believe this file are correct

in both scenarios I can't import this component to another vue project using import {HelloWorld} from 'path/to/folder/or/file'; or require('path/to/folder/or/file'). It seems like bundle files haven't exported member.

what I doing wrong? Should use build --target wc or build --target lib?

If You don't want to create new app to reproduce this issue U can download repo from https://github.com/okosowski/vueTest (project started using vue cli).

git clone
npm install
npm run build-bundle-lib or npm run build-bundle-lib
npm link or simply copy file to exiting vue project
try to import/display HelloWorld

I will be grateful for any help!!! thanks

node v10.14.2

npm 6.4.1

vue-Cli 2.9.6 (the same on 3.3.0)

other used version in https://github.com/okosowski/vueTest/blob/master/package.json

Hi Oskar, I have quite similar issue as you. This is my lib . Mine only works sometimes, which is very weird. Getting that unknown custom element: <S2SCurrencyInput> - did you register the component correctly? . Have you found a solution? I have tried the answer which was posted here, but no luck. — Jeremy Walters
@JeremyWalters sorry, I was offline this time. In my case solution was the same name in exported component/file name/build components. Can you share your repo? — Oskar Kosowski
Hi Oskar, I found a solution. Use it as a plugin. So in any project you want to use it. Import it and call vue.use(your_repo). My repo github.com/payfind/shop2shop-vue-components — Jeremy Walters

A. B. Al-Idrus A. B. Al-Idrus · Accepted Answer · 2019-01-22T11:58:32

I was facing the same exact problem while using vue-cli to build and test my Vue component. Fortunately I was able to find the solution after reporting it as a bug to vue-cli issue tracker on GitHub. Turned out there was nothing wrong with the common.js file nor was it a bug.

Anyway... long story short, the existing project you are trying to import into is unable to resolve symlinks (because this is what happens when you use npm link). In order to solve your problem, you need to add the following into vue.config.js in the root folder of the project you are importing into:

// vue.config.js
module.exports = {
    chainWebpack: config => config.resolve.set('symlinks', false)
}

Hope this helps. For more info, check out these links:

My issue report in the vue-cli tracker
Webpack configuration: resolve.symlinks

can't import Vue component built by vue-cli-service

1 Answers