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

tobiasdiez commented 3 years ago

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

https://github.com/JabRef/JabRefOnline/pull/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 commented 3 years ago

Probably a regression of nuxt/framework#1849

antfu commented 3 years ago

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 commented 3 years ago

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

antfu commented 3 years ago

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

tobiasdiez commented 3 years ago

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?)

nuxt / bridge