I'm developing a Vue 3 component library using Vite and TypeScript, and when I import and use my library in another Vue 3 app, I get the following error:

runtime-core.esm.js:38 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.

After some research, I found that this issue often occurs due to multiple Vue instances being bundled together. However, I'm already using external: ["vue"] in my vite.config.ts, so I don't understand why this is happening.

This is my vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import typescript2 from "rollup-plugin-typescript2";
import { resolve } from "path";
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

// /config/
export default defineConfig({
    plugins: [
        vue(),
        typescript2({
            check: false,
            include: ["src/**/*.vue", "src/**/*.ts"],
            tsconfigOverride: {
                compilerOptions: {
                    outDir: "dist",
                    sourceMap: true,
                    declaration: true,
                    declarationMap: true
                }
            },
            exclude: ["vite.config.ts"]
        }),
        cssInjectedByJsPlugin()
    ],
    build: {
        cssCodeSplit: false,
        sourcemap: false,
        lib: {
            entry: "./src/main.ts",
            formats: ["es", "cjs"],
            name: "RuntimeCore",
            fileName: format => `runtime-core.${format}.js`
        },
        rollupOptions: {
            external: ["vue"],
            output: {
                exports: "named",
                globals: {
                    vue: "Vue"
                }
            }
        }
    },
    resolve: {
        alias: {
            "@": resolve(__dirname, "src")
        }
    }
});

I build module and dependency using

vite build && vue-tsc --emitDeclarationOnly

In my package json i have the following entries

 "main": "dist/tk3d_hotspots.cjs.js",
 "module": "dist/tk3d_hotspots.es.js",
 "typings": "dist/main.d.ts",
 "type": "module",

Has anyone else experienced this issue with a Vue 3 + Vite library?

I'm developing a Vue 3 component library using Vite and TypeScript, and when I import and use my library in another Vue 3 app, I get the following error:

runtime-core.esm.js:38 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.

After some research, I found that this issue often occurs due to multiple Vue instances being bundled together. However, I'm already using external: ["vue"] in my vite.config.ts, so I don't understand why this is happening.

This is my vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import typescript2 from "rollup-plugin-typescript2";
import { resolve } from "path";
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        typescript2({
            check: false,
            include: ["src/**/*.vue", "src/**/*.ts"],
            tsconfigOverride: {
                compilerOptions: {
                    outDir: "dist",
                    sourceMap: true,
                    declaration: true,
                    declarationMap: true
                }
            },
            exclude: ["vite.config.ts"]
        }),
        cssInjectedByJsPlugin()
    ],
    build: {
        cssCodeSplit: false,
        sourcemap: false,
        lib: {
            entry: "./src/main.ts",
            formats: ["es", "cjs"],
            name: "RuntimeCore",
            fileName: format => `runtime-core.${format}.js`
        },
        rollupOptions: {
            external: ["vue"],
            output: {
                exports: "named",
                globals: {
                    vue: "Vue"
                }
            }
        }
    },
    resolve: {
        alias: {
            "@": resolve(__dirname, "src")
        }
    }
});

I build module and dependency using

vite build && vue-tsc --emitDeclarationOnly

In my package json i have the following entries

 "main": "dist/tk3d_hotspots.cjs.js",
 "module": "dist/tk3d_hotspots.es.js",
 "typings": "dist/main.d.ts",
 "type": "module",

Has anyone else experienced this issue with a Vue 3 + Vite library?

• javascript
• typescript
• vue.js
• vite
• rollup

Share Improve this question Follow edited Mar 12 at 11:05 claudegia asked Mar 11 at 16:58 claudegiaclaudegia 2133 bronze badges 1

• 1 You didn't provide package.json, it's relevant. Vue package duplication can occur there – Estus Flask Commented Mar 11 at 19:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Your library and the app importing it must share the same Vue instance. To enforce this, add vue as a peer dependency in your package.json:

"peerDependencies": {
  "vue": "^3.0.0"
},
"devDependencies": {
  "vue": "^3.0.0"
}

Then, in your main application, install Vue explicitly:

npm install vue@latest

This ensures your consuming app uses its own Vue instance rather than bundling another one.