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)

Most upvoted comments

@qmhc 我刚刚解决了这个问题,我修改了两个地方。1.rollup.config 中增加 resolve: { dedupe: [‘vue’] } (这个是从vite,尤大回复别人的一个问题) 2.把vue从dependencies 改为 devDependencies 。不知道是哪个起作用了,但是确实解决了

我遇到了相同的问题,在 vite.config.ts 中增加 resolve: { dedupe: ['vue'] } 这个配置解决了,感谢!

@qmhc 我刚刚解决了这个问题,我修改了两个地方。1.rollup.config 中增加 resolve: { dedupe: [‘vue’] } (这个是从vite,尤大回复别人的一个问题) 2.把vue从dependencies 改为 devDependencies 。不知道是哪个起作用了,但是确实解决了