rollup + tsx 打包的 vue3 组件在 vue-cli 中使用报错

Question

用 vue3 + tsx + rollup 打包了一个 markdown 编辑器，打包后在 vite-example 中使用正常，但是在 vue-cli 创建的 example 中使用时获取不到元素实体 ref，用的插件是 @vue/babel-plugin-jsx 。

项目地址
在目录下运行

$ npm install
$ npm run start

之后进入 example 文件夹

$ npm install
$ npm run serve

即可重现。
并且使用时甚至 onMounted 都会提示警告

[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 
  at <VueNextMEditor modelValue="# hello world" onUpdate:modelValue=fn > 
  at <App>

代码具体体现

setup () {
  const mTextareaRef = ref<HTMLTextAreaElement>()
  onMounted(() => {
    console.log('onMounted')
    console.log('mTextareaRef', mTextareaRef.value)
  })
  return () => (
    <div>
    ...
      <textarea
        ...
        ref={mTextareaRef}
      >
    </div>
  )
}

在 vite-example 中，开发环境可以正常使用，但是打包后也会提示获取不到 ref，是不是少装解析插件了😂感觉不应该这样。

Answer 1

已解决
解决方法
重复引入 vue 所致。

Answer 2

可以试试这样写

  const mTextareaRef = ref<HTMLTextAreaElement｜null>(null)

ref 用在dom 上好像有固定写法，初始化时传入null，为了和普通的原始类型区分