vue-demi adds @vue/composition-api to bundle, even if it is declared as external

[johannes-z]

Issue

My app breaks when adding any library that has vue-demi as a dependency, as it adds @vue/composition-api code to the final bundle, although I declared @vue/composition-api as external.

I resolve @vue/composition-api in an UMD/AMD environment automatically. Because there are two instances of @vue/composition-api present, the app breaks.

// relevant vite.config.ts

build: {
    rollupOptions: {
      external: [
        'vue',
        '@vue/composition-api'
      ],
    }
}

Repro

• Create a vue 2 app,
• add @vue/composition-api and @vueuse/core
• import any function from e.g. @vueuse/core
• declare @vue/composition-api as external
• run npx vite build
• parts of @vue/composition-api end up in the bundle.

Also see this repro: https://github.com/johannes-z/vue-demi-repro. See https://github.com/johannes-z/vue-demi-repro/blob/main/dist/mylib.js#L1014

[johannes-z]

Using a regex for externals revealed the following:

// vite.config.ts
      external: id => {
        if (id === 'vue') return true
        return /\@vue\/composition-api/gi.test(id)
      },

results in

define(["@vue/composition-api", "vue", "@vue/composition-api/dist/vue-composition-api.mjs"], factory)

and the following warning

No name was provided for external module '@vue/composition-api/dist/vue-composition-api.mjs' in output.globals – guessing 'VueCompositionAPI'

[antfu]

You need to external vue-demi as well

[johannes-z]

I was able to find a temporary fix, by adding an alias:

  resolve: {
    alias: [
      { find: '@vue/composition-api/dist/vue-composition-api.mjs', replacement: '@vue/composition-api' },
    ],
  },

[renatodeleao]

👋 Same issue here.

I use (and maintain) a package that depends on vue-demi@^0.13.2(it's the only one for now). The package itself is bundled via microbundle, which externalizes vue-demi by default.

After installing this package on another project — which is itself bundled via webpack@5 — it starts throwing errors due to duplicated instances of @vue/composition-api.

I've workaround it using a webpack alias that points @vue/composition-api references to the same module as suggested above by @johannes-z.

// webpack.config.js
resolve: {
  alias: {
     '@vue/composition-api$': 'path/to/node_modules/@vue/composition-api/dist/vue-composition-api.esm.js' // the one you want
  }
}

EDIT: i had a similar issue not related with vue-demi, when installing [email protected] and had to alias vue as well => vuejs/vue#12626 could this isssue be related with dual package hazard reported there?

[antfu]

external: [
   'vue',
   '@vue/composition-api',
+  'vue-demi'
]

And you should import everything from vue-demi instead of vue nor @vue/composition-api