Duplicated Vue runtime while loading vue library modules with npm link

Version

3.9.2

Environment info

Environment Info:

  System:
    OS: Linux 4.15 Linux Mint 19 (Tara)
    CPU: (8) x64 Intel(R) Core(TM) i7-3630QM CPU @ 2.40GHz
  Binaries:
    Node: 10.15.3 - /usr/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.4.1 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 67.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.9.2 
    @vue/babel-preset-jsx:  1.0.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.0.0 
    @vue/cli-overlay:  3.9.0 
    @vue/cli-plugin-babel: ^3.6.0 => 3.9.2 
    @vue/cli-plugin-eslint: ^3.6.0 => 3.9.2 
    @vue/cli-service: ^3.6.0 => 3.9.2 
    @vue/cli-shared-utils:  3.9.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    vue: ^2.6.10 => 2.6.10 (2.6.10)
    vue-eslint-parser:  2.0.3 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-localstorage: ^0.6.2 => 0.6.2 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuetify: ^1.5.13 => 1.5.16 
  npmGlobalPackages:
    @vue/cli: 3.9.2

Steps to reproduce

You will need two Vue projects, one will need be a library, the other a standard Vue project.

1. Build the Vue library project (–target lib)
2. Run npm link within the library project folder.
3. Run npm link within the standard project folder.
4. In the standard project, ensure that symlink resolution is disabled in webpack

configureWebpack: {
    resolve: {
      symlinks: false,
    }
  }

1. Build a Vue project using the library project as a dependency with npm run serve (Using Webpack HMR dev-server)
2. Load webpage dev console, you will notice multiple messages: ‘You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html’

This indicates more than one Vue instance is running.

What is expected?

Only one Vue instance should be running.

What is actually happening?

Multiple Vue instances are loaded (one runtime within the library, one runtime within the standard project).

---

This issue affects global variable assignment on the Vue instance. If the library expects global variables to be installed on the Vue instance, they will not be shared between the library and the standard project due to the Vue module runtime being loaded twice and essentially being two different objects.

I worked around the issue by deleting the ‘vue.runtime.esm.js’ file in the library project’s node_modules directory. This isn’t ideal of course. It seems like the vue-cli that runs Webpack should exclude the second runtime somehow. I was not able to figure out how to do this with the webpack configuration within Vue.config.js.

Another developer ran into this problem without there being a satisfactory solution: https://github.com/vuejs/vuex/issues/842 https://stackoverflow.com/questions/52048395/using-vuex-store-with-npm-link-in-vue-cli-3-project-loses-store

[LeBenLeBen]

I think this issue is caused by how Vue CLI aliases Vue in Webpack’s config:

resolve: {
  alias: {
    vue$: 'vue/dist/vue.runtime.esm.js',
  },
},

In one case this path is relative to the library node_modules and in the other case to the project node_modules.

I therefor overridded it in the vue.config.js of the project to make it absolute:

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        vue$: path.resolve('./node_modules/vue/dist/vue.runtime.esm.js'),
      },
    },
  },
};

With this change Vue is present only once in my project bundle.

Note that this cannot be fixed by moving Vue to peerDependencies in the library. I need Vue in development for the library to work properly.

[vue-bot]

Hello! This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues requiring feedback after 20 days of inactivity. It’s been at least 10 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. (A maintainer can also add the label not stale to keep this issue open.)

Thanks for being a part of the Vue community! 💪💚️