VueTippy does not work with Nuxt v3.0.0-rc.11

[0x408]

VueTippy does not work with new versions of Nuxt (probably starting from v3.0.0-rc.10) anymore.

/plugins/tippy.ts

import VueTippy, { roundArrow } from "vue-tippy";
import "tippy.js/animations/shift-away.css";
import "tippy.js/dist/svg-arrow.css";

export default defineNuxtPlugin(({ vueApp }) => {
    vueApp.use(VueTippy, {
        directive: "tooltip",
        defaultProps: {
            animation: "shift-away",
            arrow: roundArrow,
            theme: "custom",
            trigger: "mouseenter",
            hideOnClick: false,
            touch: false
        }
    });
});

After running

npm run build && npm run preview

this error occurs

Nuxi 3.0.0-rc.11                                                                                                                                                                                   02:00:52
ℹ Node.js version: 16.17.1                                                                                                                                                                         02:00:52
ℹ Preset: node-server                                                                                                                                                                              02:00:52
ℹ Working dir: .output                                                                                                                                                                             02:00:52
ℹ Loading .env. This will not be loaded when running the server in production.                                                                                                                     02:00:52
ℹ Starting preview command: node ./server/index.mjs 

[nuxt] [request error] [unhandled] [500] Cannot find module '/home/username/Projects/project/nuxt/.output/server/node_modules/vue-tippy/dist/vue-tippy.mjs' imported from /home/username/Projects/project/nuxt/.output/server/chunks/app/server.mjs
  at new NodeError (node:internal/errors:387:5)  
  at finalizeResolution (node:internal/modules/esm/resolve:429:11)  
  at moduleResolve (node:internal/modules/esm/resolve:1006:10)  
  at defaultResolve (node:internal/modules/esm/resolve:1214:11)  
  at nextResolve (node:internal/modules/esm/loader:165:28)  
  at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)  
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)  
  at link (node:internal/modules/esm/module_job:75:36)

This is fixed by updating nuxt.config.ts

export default defineNuxtConfig({
    build: {
        transpile: ["vue-tippy"]
    }
});

But then after trying production build again, another error occurs

Nuxi 3.0.0-rc.11                                                                                                                                                                                   02:00:52
ℹ Node.js version: 16.17.1                                                                                                                                                                         02:00:52
ℹ Preset: node-server                                                                                                                                                                              02:00:52
ℹ Working dir: .output                                                                                                                                                                             02:00:52
ℹ Loading .env. This will not be loaded when running the server in production.                                                                                                                     02:00:52
ℹ Starting preview command: node ./server/index.mjs 

Listening http://[::]:3000
[nuxt] [request error] [unhandled] [500] The requested module 'vue' does not provide an export named 'default'
  at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)  
  at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)  
  at async Promise.all (index 0)  
  at async ESMLoader.import (node:internal/modules/esm/loader:533:24)  
  at async ./server/chunks/handlers/renderer.mjs:304:24  
  at async ./server/chunks/handlers/renderer.mjs:366:64  
  at async ./server/chunks/handlers/renderer.mjs:28:22  
  at async ./server/node_modules/h3/dist/index.mjs:592:19  
  at async Server.nodeHandler (./server/node_modules/h3/dist/index.mjs:538:7)

[Riadz]

Same issue for me too, nuxt v3.0.0-rc10 - vue-tippy v6.0.0-alpha.63 but i did get it working by manually copying vue-tippy.mjs

copy ./node_modules/vue-tippy/dist/vue-tippy.mjs into ./.output/server/node_modules/vue-tippy/dist/, and remove ... transpile: ["vue-tippy"] ... the build will work, and with ssr (tooltip content will be rendered on the server),

i think the issue is with vue-tippy's index.js, not accounting for .mjs file, this part:

hope this helps. @KABBOUCHI

[KABBOUCHI]

plz update to v6.0.0-alpha.65, it should be fixed now