Components exported from Vue.js 3 library cannot be used in application

[livthomas]

Version

4.5.11

Reproduction link

https://github.com/livthomas/vue-bug

Environment info

  System:
    OS: Linux 5.10 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
  Binaries:
    Node: 15.10.0 - /usr/bin/node
    Yarn: 1.22.10 - ~/.npm-global/bin/yarn
    npm: 7.6.1 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 86.0
  npmGlobalPackages:
    @vue/cli: 4.5.11

Steps to reproduce

1. Install and build the library:

cd lib
npm install
npm run build

2. Link library and start the application:

cd ../app
npm link ../lib
npm run serve

3. Open the application running at http://localhost:8080/
4. Notice missing content and warnings in the dev console

What is expected?

A component imported from the library should work without any problems in the application.

What is actually happening?

There is a warning saying [Vue warn]: Invalid VNode type: Symbol(Static) (symbol) and the component is not rendered properly. You can see that the mixin (defined in the same Vue.js plugin as the component) works properly but the component does not.

---

I'm trying to create a component library, export those components as a Vue.js plugin and then reuse it across multiple applications. By the way, when I import components directly (without plugin), I run into the same problem. I am not sure whether I miss something or there is some bug in Vue.js 3 (or Vue CLI) that nobody noticed yet.

[LinusBorg]

The issue is that the code in your app uses /your-app/node_modules/vue, and the code from your lib directory (linked or directly imported) uses /your-lib/node_modules/vue.

This is an issue only in such local dev situations. when your component is npm-installed into an app, both vue dependencies will be hoisted into one entry in /node_modules.

For your local dev, you have to make sure that only one copy is used by all the code, i.e. by linking the vue (and sub-packages like @vue/runtime-core) from the lib to the app or similar.

[livthomas]

@LinusBorg, thank you for a quick response and for pointing out what exactly causes this problem.

There is the following paragraph in the Vue CLI documentation:

In lib mode, Vue is externalized. This means the bundle will not bundle Vue even if your code imports Vue. If the lib is used via a bundler, it will attempt to load Vue as a dependency through the bundler; otherwise, it falls back to a global Vue variable.

So I thought Vue CLI would take care of it. If that's not the case, how exactly does it need to be configured to make it work? I would need something that can be automatically set up on every machine where the repository is checked out because this library will never be published anywhere. It will just be used when building those applications in local dev environment or in CI jobs.

I think it should then also be added to the documentation because I guess most people test their libraries locally first before publishing them to the NPM registry.

[livthomas]

Ok, I have just realized that the easiest fix is to remove node_modules from the lib folder and it will work. Or is there a better solution?

[LinusBorg]

That will work as long as your lib bundles all of its other dependencies instead of externalizing them like its done for vue, or those dependencies are also included in the deps of the consuming apps.

Maybe just delete node_modules/vue and /node_modules/@vue/* ...

I personally haven't tried, but using an absolute path alias for the vue package and its sub-packages in the consuming app might be a more stable solution.

// vue.config.js
/// ...

chainWebpack: config => {
  config.resolve
    .alias.delete('vue$')
    alias.set('vue$', path.join(__dirname, 'node_modules/vue/dist/vue.esm.js')
    alias.set('@vue/runtime-core$', path.join(__dirname, 'node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js.js')
    alias.set('@vue/runtime-dom$', path.join(__dirname, 'node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js.js')
    alias.set('@vue/reactivity$', path.join(__dirname, 'node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js.js')
}

[livthomas]

I can only see vue$ alias in my configuration so the following line has fixed the problem:

config.resolve.alias.set('vue$', path.join(__dirname, 'node_modules', config.resolve.alias.get('vue$')));

I went even further and implemented it for all packages in vue scope:

Object.entries(config.resolve.alias.entries()).forEach(([alias, value]) => {
  if (alias === 'vue$' || alias.startsWith('@vue/')) {
    config.resolve.alias.set(alias, path.join(__dirname, 'node_modules', value));
  }
});

@LinusBorg, thank you very much for your help!

I think this should be mentioned in the Library section of the documentation. Or maybe even better solution would be to introduce a new option in vue.config.js and if it was set to true, Vue CLI would take care of this automatically.