core: About `Missing ref owner contextMissing ref owner context`
Version
3.1.1
Reproduction link
https://github.com/qmhc/vue-test
我在项目里定义了一个 Test
组件,这个组件有一定程度的 ref 嵌套引用:
<!-- Test.vue -->
<template>
<Test2 ref="select" class="test" @on-toggle="click">
<template #control>
<input :value="currentValue" />
</template>
<slot>
<Test4 ref="test4" class="test-tel"></Test4>
</slot>
</Test2>
</template>
<!-- Test2.vue -->
<template>
<div ref="wrapper" class="test2">
<div ref="reference">
<slot name="control">
<Test4></Test4>
</slot>
</div>
</div>
</template>
如果我直接在该项目中使用该组件,并不会产生任何问题,打包后应用可以正常使用;
当我将 Test
组件单独打包成插件后,在另一个项目安装并使用时:
在开发服务下会抛出警告:
[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.
打包后会直接抛出错误:Uncaught TypeError: Cannot read property 'refs' of null
Steps to reproduce
在原始的项目里,运行 yarn run dev
能正常使用。
运行 yarn run build
打包 Test
组件后,用 vite
的模版创建一个新的项目,link 引用原始项目打包的组件,随后运行 yarn run dev
后得到标题中的警告,在这个项目打包后,页面不能正常打开。
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<!-- take warning -->
<Test></Test>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Test } from 'test'
export default defineComponent({
name: 'App',
components: {
Test
}
})
</script>
What is expected?
同样的组件,两个使用场景出现了差异
What is actually happening?
同样的组件,两个使用场景出现了差异
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 16 (1 by maintainers)
我遇到了相同的问题,在 vite.config.ts 中增加
resolve: { dedupe: ['vue'] }
这个配置解决了,感谢!@qmhc 我刚刚解决了这个问题,我修改了两个地方。1.rollup.config 中增加 resolve: { dedupe: [‘vue’] } (这个是从vite,尤大回复别人的一个问题) 2.把vue从dependencies 改为 devDependencies 。不知道是哪个起作用了,但是确实解决了