popover component with custom style has some bugs（在使用popover 组件自定义style样式时，会有报错）

[YutHelloWorld]

TuSimple/naive-ui version (版本)

2.30.6

Vue version (Vue 版本)

3.2.37

Browser and its version (浏览器及其版本)

chrome 版本 102.0.5005.115（正式版本） (x86_64)

System and its version (系统及其版本)

macOS 12.4

Node version (Node 版本)

Reappearance link (重现链接)

https://github.com/TuSimple/naive-ui

Reappearance steps (重现步骤)

1、git clone https://github.com/TuSimple/naive-ui.git 2、cd naive-ui 3、pnpm i 4、pnpm run dev 5、编辑naive-ui/src/popover/demos/zhCN/style.demo.vue 任意位置插入注释

<template>
  <n-space>
    <!-- 1234 -->
    <n-popover style="width: 500px" trigger="click">

6、修改<!-- 1234 -->为 <!-- 12 --> ，发生报错 runtime-core.esm-bundler.js:2784 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value') at invokeDirectiveHook (runtime-core.esm-bundler.js:2784:47) at Array. (runtime-core.esm-bundler.js:5329:25) at flushPostFlushCbs (runtime-core.esm-bundler.js:358:32) at flushJobs (runtime-core.esm-bundler.js:403:9)

Expected results (期望的结果)

无报错

Actual results (实际的结果)

猜测应该是style popover withDirectives有问题

Remarks (补充说明)

[Volankey]

看起来是热更新的时候出现的问题

[YutHelloWorld]

@Volankey 在业务中使用popover 改写其style后，popover所在业务模板里只要改写下代码，热更新时候就会报以上错误，并且页面僵死

[07akioni]

@Volankey 在业务中使用popover 改写其style后，popover所在业务模板里只要改写下代码，热更新时候就会报以上错误，并且页面僵死

页面死掉应该是因为出了个 error。

热更新问题一般是 vue runtime 的 bug。

[07akioni]

不太确认具体原因，但是和 popover 的 style 属性可能关系不大，我试了试改 style 是没有问题的。

这里是 vue 的 directive 在同一个 vnode 上出现了两次，我还不太清楚是为啥。

可能是 n-space 和 n-popover 和注释搞出来的复合问题。

[YutHelloWorld]

@07akioni 注释只是一个案例。可以尝试下存在style多前提下，修改其他标签，热更新的时候也会同样报错。

[07akioni]

@07akioni 注释只是一个案例。可以尝试下存在style多前提下，修改其他标签，热更新的时候也会同样报错。

没有 space 的话问题还存在吗？

[YutHelloWorld]

存在。我在业务代码里只用了popover组件，没有用space。业务代码不方便贴，所以用的官方demo复现。

[07akioni]

存在。我在业务代码里只用了popover组件，没有用space。业务代码不方便贴，所以用的官方demo复现。

行吧，这个我会看看，但是优先级不一定会很高，可能是碰到了 vue 的边界 case

[rhengles]

Yep, I also got this error

[kinggq]

我也遇到了同样的错误，自定义样式去掉后不在报错了

[kinggq]

使用 n-modal 热更新时的时候也遇到同样的问题，同样的报错，页面僵死。 youyuxi 的回复：https://github.com/vuejs/core/pull/4443#issuecomment-1259205410

[Sepush]

vuetify有遇到类似的情况 他们的做法是去掉 computed 不 cache https://github.com/vuetifyjs/vuetify/issues/15724 commit https://github.com/vuetifyjs/vuetify/commit/3c071db095599f946be29278081bd3c9ae156daa

[jahnli]

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem