cherrypick icon indicating copy to clipboard operation
cherrypick copied to clipboard

Published 20 hours ago • verified publisher icon kokonect-link

리모트에서 온 커스텀 이모지 리액션이 노트 아래에 제대로 표시되지 않음

Open nulta opened this issue 9 months ago • 0 comments

💡 Summary

리모트에서 온 커스텀 이모지 리액션이 노트의 아래쪽에 제대로 표시되지 않고, HTML을 열어 보면 <!---->으로 되어 있습니다. 콘솔 창을 열어보면 리액션 버튼 하나 당 에러 로그(아래에 있음)가 하나씩 찍혀있습니다

아무래도 이 쪽의 코드에서 문제가 발생하는 듯합니다.

https://github.com/kokonect-link/cherrypick/blob/develop/packages/frontend/src/components/MkReactionsViewer.reaction.vue#L69C117-L69C138

일단은 /settings/cherrypick의 서버에 리모트 이모지와 이름이 같은 이모지가 있으면 리모트 이모지에도 반응할 수 있음 옵션이 켜져있을 때만 문제가 발생합니다.

🥰 Expected Behavior

image

🤬 Actual Behavior

image

추가로 표시되지 않은 리액션 버튼의 개수만큼, 아래의 에러 로그가 표시됩니다.

TypeError: i1.value is undefined
    v https://mi.rerac.dev/vite/4.8.0.1zy0AQNd.js:17
    effect https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    run https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    get value https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    setup https://mi.rerac.dev/vite/4.8.0.1zy0AQNd.js:17
    Rn https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    w https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    run https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    update https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    k https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    te https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    q https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    V https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    x https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    b https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    y https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    V https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    w https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    run https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    update https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    k https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    te https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    q https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    V https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    w https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    run https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    update https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    k https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    te https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    q https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    V https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    x https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    b https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    y https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    V https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    x https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    b https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    y https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    V https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    x https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    b https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    y https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    V https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    w https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    run https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    update https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    k https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    te https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    q https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    V https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    x https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    b https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    y https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    V https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    x https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    b https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    y https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    V https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    x https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    b https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    y https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    V https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    w https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    run https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    update https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    afterLeave https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    A https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    Je https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    N https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    te https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    i https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    d https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    Qr https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    setTimeout handler*Qr https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    onLeave https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    Zr https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    Zr https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    onLeave https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    Ue https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    we https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    y https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    b https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    leave https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    P https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    Tr https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    Pe https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    cl https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    Pe https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    V https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    w https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    run https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    update https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    Ue https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    Ui https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    promise callback*Bi https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    zn https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    effect https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    Ys https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    xi https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    Ot https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    set value https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    o https://mi.rerac.dev/vite/4.8.0.1zy0AQNd.js:1
    promise callback*N0 https://mi.rerac.dev/vite/4.8.0.1zy0AQNd.js:1
    y https://mi.rerac.dev/vite/4.8.0.BVFod8Nq.js:1
    Ue https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
    we https://mi.rerac.dev/vite/4.8.0.Cy1_tXUg.js:1
4.8.0.Cy1_tXUg.js:1:17317

📝 Steps to Reproduce

  1. /settings/cherrypick의 서버에 리모트 이모지와 이름이 같은 이모지가 있으면 리모트 이모지에도 반응할 수 있음 옵션을 켠다.
  2. 리모트에서 온 커스텀 이모지 리액션이 달려 있는 노트를 찾아본다.
  3. 리모트에서 온 커스텀 이모지가 노트 아래에 전혀 표시되지 않음을 확인한다.

💻 Frontend Environment

* Model and OS of the device(s): Windows 11
* Browser: Firefox 126.0; same on Microsoft Edge 125.0
* Server URL: mi.rerac.dev; same on kokonect.link
* CherryPick: 4.8.0

🛰 Backend Environment (for server admin)

* Installation Method or Hosting Service:
* CherryPick:
* Node:
* PostgreSQL:
* Redis:
* OS and Architecture:

Do you want to address this bug yourself?

  • [ ] Yes, I will patch the bug myself and send a pull request

nulta avatar May 20 '24 06:05 nulta