Issue with @vue/composition-api resolution

[danielroe]

Describe the bug and expected behavior

Libraries may resolve their own version of @vue/composition-api. For example, vue-demi does this: vueuse/vue-demi#105

Any resolved version will fail if transpiled (e.g. @vue/composition-api/dist/vue-composition-api.esm.js gets resolved - because of the alias we set - to @vue/composition-api/dist/vue-composition-api.mjs/dist/vue-composition-api.esm.js.

Moreover, if not transpiled, if the resolved version is not what we use (the .mjs version), the composition API plugin will not be successfully enabled and libraries that use (for example) vue-demi will fail confusingly.

It is possible to resolve by creating additional aliases in bridge/capi but wanted to raise as an issue before submitting PR as this is a broader ecosystem issue. (It will, for example, also affect @nuxtjs/composition-api and other community libraries.)

cc: @antfu

[pi0]

I would suggest additionally alias any other variant of imports from @vue/composition-api in the bridge.

This issue indeed is broader especially in conjunction with externals and also might happen for vue imports which is worst. (#590, nuxt/nuxt#11817)

[tobiasdiez]

Is this now indeed resolved? I just got the following error

file:///D:/Programming/JabRefOnline/node_modules/@vue/apollo-composable/node_modules/vue-demi/lib/index.mjs:18
export { EffectScope, computed, createApp, createRef, customRef, defineAsyncComponent, defineComponent, del, effectScope, getCurrentInstance, getCurrentScope, h, inject, isRaw, isReactive, isReadonly, isRef, markRaw, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, provide, proxyRefs, reactive, readonly, ref, set, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useCSSModule, useCssModule, useSlots, warn, watch, watchEffect, watchPostEffect, watchSyncEffect } from '@vue/composition-api/dist/vue-composition-api.esm.js'
         ^^^^^^^^^^^
SyntaxError: Named export 'EffectScope' not found. The requested module '@vue/composition-api/dist/vue-composition-api.esm.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@vue/composition-api/dist/vue-composition-api.esm.js';
const { EffectScope, computed, createApp, createRef, customRef, defineAsyncComponent, defineComponent, del, effectScope, getCurrentInstance, getCurrentScope, h, inject, isRaw, isReactive, isReadonly, isRef, markRaw, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, provide, proxyRefs, reactive, readonly, ref, set, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useCSSModule, useCssModule, useSlots, warn, watch, watchEffect, watchPostEffect, watchSyncEffect } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async __instantiateModule__ (file:///D:/Programming/JabRefOnline/.nuxt/dist/server/server.mjs:51021:3)
[vite dev] Error loading external "D:/Programming/JabRefOnline/node_modules/@vue/apollo-composable/node_modules/vue-demi/lib/index.mjs".
  at file:///D:/Programming/JabRefOnline/.nuxt/dist/server/server.mjs:18798:313
  at async __instantiateModule__ (file:///D:/Programming/JabRefOnline/.nuxt/dist/server/server.mjs:51021:3)

using latest bridge + vite. Can be fixed by adding vue-demi to vite.ssr.noExternal.

[danielroe]

@tobiasdiez I think it's an issue with the version of vue-demi you're on. Try upgrading it.

[tobiasdiez]

That might be indeed the case and there is already a PR for apollo-composable upgrading vue-demi vuejs/apollo#1278.

Instead of only adding more noise, let me also use the opportunity to thank you a lot for all the work you guys are putting into nuxt! Especially your last PR about the esm docs was super helpful!