Error: Must call Vue.use(VueCompositionAPI) before using any function

[tobiasdiez]

Environment

• Operating System: Windows_NT
• Node Version: v17.0.1
• Nuxt Version: 2.16.0-27273615.ab1c6cb4
• Package Manager: yarn@1.22.15
• Bundler: Webpack
• User Config: target, bridge, vite, alias, nitro, ssr, head, css, plugins, components, tailwindcss, buildModules, modules, serverMiddleware, watch, privateRuntimeConfig, build, storybook
• Runtime Modules: -
• Build Modules: @nuxtjs/tailwindcss@4.2.1, portal-vue/nuxt, @nuxt/postcss8@1.1.3, @pinia/nuxt@0.1.0, nuxt-route-meta@2.3.2, @nuxt/bridge@3.0.0-27282980.f011a60

Reproduction

JabRef/JabRefOnline#480

Describe the bug

After upgrading 3.0.0-27276275.abfbd2f > 3.0.0-27282980.f011a60 I get the following error in the browser console:

Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
assert vue-composition-api.mjs:34
getVueConstructor vue-composition-api.mjs:315
isComponentInstance vue-composition-api.mjs:448
setupAccessControl vue-composition-api.mjs:672
reactive vue-composition-api.mjs:880
ref2 vue-composition-api.mjs:555
useQueryImpl useQuery.ts:147
useQuery useQuery.ts:132
setup SideBar.vue:146
mergedSetupFn vue-composition-api.mjs:2106
initSetup vue-composition-api.mjs:1918
activateCurrentInstance vue-composition-api.mjs:1833
initSetup vue-composition-api.mjs:1916
wrappedData vue-composition-api.mjs:1899
VueJS 36
NuxtJS 3

Additional context

No response

Logs

No response

[pi0]

Probably a regression of nuxt/framework#1849

[antfu]

If you are using VueUse, please upgrade to 6.9.1 and install the @vueuse/core/nuxt module.

If you can't upgrade for you, here is the manual setup:

export default {
 vite: {
    optimizeDeps: {
      exclude: [
        '@vueuse/core',
        '@vueuse/shared',
      ],
    },
  }
}

/cc @pi0 I guess Vite's optimizeDeps is kinda tricky since it does not exclude nested deps, which causing duplication if you have direct and indirect imports at the same time. From what I can see, I guess the best solution is to send PR to Vite and make the optimization excluding nested deps if they are explicitly specified in the list (which I am not sure if it's feasible to do on esbuild yet)

[pi0]

Linked reproduction seems not using vueuse (but pinia module which is not upgraded yet)

[antfu]

It probably affects any libraries that rely on either vue-demi @vue/composition-api or even vue

[tobiasdiez]

Thanks for the quick fix! The error is now indeed gone.

However, now I encounter another issue. Namely, the the vue runtime (vue.runtime.esm.js) is appearently present twice. Once from .cache/vite/client/chunk-xyz and once directly from node_modules/vue/dist. I suspect that some library is importing vue a bit strangely and thus pulls in another copy of the runtime. But I have a hard time tracking this down. Any advice on how to investigate such issues? Especially, which of the versions should be there and which not?

(Maybe its better to open a new issue for this?)