Component inside <Transition> renders non-element root node that cannot be animated #1944

New Issue

andreymal · 2022-07-15T16:40:32Z

andreymal commented

2022-07-15 16:40:32 +00:00

Every time I click to a task on the Kanban view, the following error occurs:

Component inside <Transition> renders non-element root node that cannot be animated. 
Proxy { <target>: {…}, <handler>: {…} }
 app warnHandler main.ts:92:10
    errorHandler main.ts:92
    (promise callback)
    // ...
    finalizeNavigation vue-router.mjs:3307
    pushWithRedirect vue-router.mjs:3180
    (Асинхронный: promise callback)
    pushWithRedirect vue-router.mjs:3151
    push vue-router.mjs:3078
    openTaskDetail kanban-card.vue:131
    _sfc_render/_cache[0]< kanban-card.vue:10

Every time I click to a task on the Kanban view, the following error occurs: ``` Component inside <Transition> renders non-element root node that cannot be animated. Proxy { <target>: {…}, <handler>: {…} } app warnHandler main.ts:92:10 errorHandler main.ts:92 (promise callback) // ... finalizeNavigation vue-router.mjs:3307 pushWithRedirect vue-router.mjs:3180 (Асинхронный: promise callback) pushWithRedirect vue-router.mjs:3151 push vue-router.mjs:3078 openTaskDetail kanban-card.vue:131 _sfc_render/_cache[0]< kanban-card.vue:10 ```

andreymal commented

2022-07-15 16:45:33 +00:00

The keyboard shortcuts popup shows a similar error (but not sure if this is related to this issue)

Component inside <Transition> renders non-element root node that cannot be animated. 
Proxy { <target>: {…}, <handler>: {…} }
 app warnHandler main.ts:92:10
    errorHandler main.ts:92
    (promise callback)
    keyboardShortcutsActive index.ts:81
    0 TheNavigation.vue:72

The keyboard shortcuts popup shows a similar error (but not sure if this is related to this issue) ``` Component inside <Transition> renders non-element root node that cannot be animated. Proxy { <target>: {…}, <handler>: {…} } app warnHandler main.ts:92:10 errorHandler main.ts:92 (promise callback) keyboardShortcutsActive index.ts:81 0 TheNavigation.vue:72 ```

konrad added the

kind/bug

label 2022-07-18 13:30:56 +00:00

konrad commented

2022-07-19 14:43:51 +00:00

It seems like this error always occurs when vue components are placed in a <Transition> element.

It seems like this error always occurs when vue components are placed in a `<Transition>` element.

konrad commented

2022-07-19 14:44:53 +00:00

Looks like transitions need a single child node: https://stackoverflow.com/a/68561753/10924593

konrad referenced this issue from a commit

2022-07-19 14:56:12 +00:00

fix: don't use transitions for elements where it is not possible

konrad closed this issue

2022-07-19 14:56:12 +00:00

konrad commented

2022-07-19 14:56:55 +00:00

Removed these broken transitions in c2d5370e4a - they were not working at all anyway. I think we need a better solution for these, but that's an issue for another day.

cc @dpschen

Removed these broken transitions in https://kolaente.dev/vikunja/frontend/commit/c2d5370e4a88fc646dccd3c598c2953b6b40ca82 - they were not working at all anyway. I think we need a better solution for these, but that's an issue for another day. cc @dpschen

dpschen commented

2022-07-20 18:25:59 +00:00

The transition wrapper that you removed were correct afaik.

The problem with the transitions was that some components use a transition as their first child. This makes a transition a child of a transition.

See: https://kolaente.dev/vikunja/frontend/src/branch/main/src/components/misc/modal.vue#L3

and than e.g.:

https://kolaente.dev/vikunja/frontend/src/branch/main/src/components/sharing/linkSharing.vue#L160
or
https://kolaente.dev/vikunja/frontend/src/branch/main/src/components/sharing/userTeam.vue#L116

Which of our components do have multiple root children?

The transition wrapper that you removed were correct afaik. The problem with the transitions was that some components use a transition as their first child. This makes a transition a child of a transition. See: https://kolaente.dev/vikunja/frontend/src/branch/main/src/components/misc/modal.vue#L3 and than e.g.: https://kolaente.dev/vikunja/frontend/src/branch/main/src/components/sharing/linkSharing.vue#L160 or https://kolaente.dev/vikunja/frontend/src/branch/main/src/components/sharing/userTeam.vue#L116 Which of our components do have multiple root children?

andreymal commented

2022-07-21 14:02:58 +00:00

Same error when deleting a task

Component inside <Transition> renders non-element root node that cannot be animated. 
Proxy { <target>: {…}, <handler>: {…} }
 app warnHandler main.ts:92:10
    errorHandler main.ts:92
    (promise callback)
    35 TaskDetailView.vue:392
    invoker runtime-dom.esm-bundler.js:369

Same error when deleting a task ``` Component inside <Transition> renders non-element root node that cannot be animated. Proxy { <target>: {…}, <handler>: {…} } app warnHandler main.ts:92:10 errorHandler main.ts:92 (promise callback) 35 TaskDetailView.vue:392 invoker runtime-dom.esm-bundler.js:369 ```

konrad commented

2022-07-21 14:14:29 +00:00

Fixed in 56147dc9fb

Fixed in 56147dc9fbed5680a06de200dbd9111d92b5cf6f

konrad referenced this issue from a commit

2024-02-07 14:00:34 +00:00

chore(deps): update dependency esbuild to v0.14.39 (#1944)

Sign in to join this conversation.