Vue-cli: "export 'VueTestComponent' was not found in 'vue-test-component' when imported from another project

[alidrus]

Version

3.3.0

Reproduction link

https://github.com/alidrus/vue-test-component

Environment info

  System:
    OS: Linux 3.10 CentOS Linux 7 (Core)
    CPU: (1) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
  Binaries:
    Node: 8.15.0 - /usr/bin/node
    Yarn: 1.13.0 - /usr/bin/yarn
    npm: 6.4.1 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.3.0
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.3.0
    @vue/cli-plugin-babel: ^3.3.0 => 3.3.0
    @vue/cli-plugin-eslint: ^3.3.0 => 3.3.0
    @vue/cli-plugin-unit-mocha: ^3.3.0 => 3.3.0
    @vue/cli-service: ^3.3.0 => 3.3.0
    @vue/cli-shared-utils:  3.3.0
    @vue/component-compiler-utils:  2.5.0
    @vue/eslint-config-airbnb: ^4.0.0 => 4.0.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.28
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  3.7.0
    eslint-plugin-vue: ^5.0.0 => 5.1.0
    vue: ^2.5.21 => 2.5.22
    vue-cli-plugin-component: ^1.10.5 => 1.10.5
    vue-docgen-api:  2.6.12
    vue-eslint-parser:  4.0.3
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.5.1
    vue-resize:  0.4.5
    vue-style-loader:  3.1.2
    vue-styleguidist: ^1.7.13 => 1.9.0
    vue-template-compiler: ^2.5.21 => 2.5.22
    vue-template-es2015-compiler:  1.8.1
    vue-webpack-loaders:  1.0.8
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. Create a vue-cli project with vue create vue-test-component
2. cd vue-test-component
3. Make sure the package.json build script runs vue-cli-service build --target lib --name vue-test-component src/index.js
4. Make sure the main in package.json is set to dist/vue-test-component.common.js
5. Create a simple component as src/component/VueTestComponent.vue like so:

<template>
    <p>{{ message }}</p>
</template>
<script>
export default {
    props: {
        message: String
    }
}
</script>

1. Create a script to import and export the component as src/index.js

import VueTestComponent from './components/VueTestComponent.vue';
export {
    VueTestComponent
}

1. Run yarn build --fix
2. Use yarn link and yarn link vue-test-component to make it available in another project.
3. import the component in the other project:

import { VueTestComponent } from 'vue-test-component';

1. yarn serve the project using VueTestComponent

What is expected?

This warning message

"export 'VueTestComponent' was not found in 'vue-test-component'

What is actually happening?

Although only a warning, the component built with vue-cli cannot be used in another project.

[sodatea]

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

https://webpack.js.org/configuration/resolve/#resolve-symlinks

[alidrus]

Thank you so much for the answer and hope I didn’t waste too much of your time.

[gatherben]

Thanks @sodatea this was driving me crazy!

[cmitz]

Awesome that this solution is working, but I don't understand why this fix worked for you. @alidrus did you use a symlink in your component library?

[alidrus]

Awesome that this solution is working, but I don't understand why this fix worked for you. @alidrus did you use a symlink in your component library?

Honestly, I don't remember anymore but I did write a simple Vue component later called
vue-simple-inline-translation
and it did not seem to have this problem. You're welcome to take a look at it.

[zmears]

The curly braces around VueTestComponent in the import were the problem for me. I ran into this same issue in my project just now.

This article helped me realize my mistake.

https://stackoverflow.com/questions/54020674/vue-js-export-filelist-was-not-found-in-components-filelist/54020792

I noticed in your library @alidrus you do not have them and I suspect that is why it works fine.