TypeError: Cannot read properties of null (reading 'insertBefore') #2086

Closed
opened 2023-12-26 06:18:15 +00:00 by fractalshine · 9 comments

Description

Can't edit my task since I've updated vikunja to v0.22 from v0.21, only SAVE button appeared inside which doesn't work.

I see following errors in browser console when opening task:

TypeError: Cannot read properties of null (reading 'insertBefore')
    at insert (runtime-dom.esm-bundler.js:10:12)
    at Oe (runtime-core.esm-bundler.js:5189:7)
    at xe (runtime-core.esm-bundler.js:5092:28)
    at je (runtime-core.esm-bundler.js:5515:7)
    at Re (runtime-core.esm-bundler.js:5407:7)
    at Be (runtime-core.esm-bundler.js:5255:7)
    at xe (runtime-core.esm-bundler.js:5116:11)
    at ReactiveEffect.Kt [as fn] (runtime-core.esm-bundler.js:5861:9)
    at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
    at Ge.Xe.update (runtime-core.esm-bundler.js:5902:51)

and this when trying to close:

TypeError: Cannot destructure property 'bum' of 'Xe' as it is null.
    at En (runtime-core.esm-bundler.js:6375:13)
    at fn (runtime-core.esm-bundler.js:6283:24)
    at gn (runtime-core.esm-bundler.js:6402:7)
    at fn (runtime-core.esm-bundler.js:6303:9)
    at En (runtime-core.esm-bundler.js:6382:15)
    at fn (runtime-core.esm-bundler.js:6283:24)
    at En (runtime-core.esm-bundler.js:6382:15)
    at fn (runtime-core.esm-bundler.js:6283:24)
    at gn (runtime-core.esm-bundler.js:6402:7)
    at fn (runtime-core.esm-bundler.js:6303:9)

Tested on two browsers, firefox 118.0 and Chromium 120.0.6099.129

Vikunja Frontend Version

0.22.0

Vikunja API Version

v0.22.0

Browser and version

Chromium Engine Version 120.0.6099.129

Can you reproduce the bug on the Vikunja demo site?

Yes

Screenshots

Screenshot 2023-12-24 at 13.00.46.png
Screenshot 2023-12-24 at 13.00.59.png

### Description Can't edit my task since I've updated vikunja to v0.22 from v0.21, only SAVE button appeared inside which doesn't work. I see following errors in browser console when opening task: ``` TypeError: Cannot read properties of null (reading 'insertBefore') at insert (runtime-dom.esm-bundler.js:10:12) at Oe (runtime-core.esm-bundler.js:5189:7) at xe (runtime-core.esm-bundler.js:5092:28) at je (runtime-core.esm-bundler.js:5515:7) at Re (runtime-core.esm-bundler.js:5407:7) at Be (runtime-core.esm-bundler.js:5255:7) at xe (runtime-core.esm-bundler.js:5116:11) at ReactiveEffect.Kt [as fn] (runtime-core.esm-bundler.js:5861:9) at ReactiveEffect.run (reactivity.esm-bundler.js:178:19) at Ge.Xe.update (runtime-core.esm-bundler.js:5902:51) ``` and this when trying to close: ``` TypeError: Cannot destructure property 'bum' of 'Xe' as it is null. at En (runtime-core.esm-bundler.js:6375:13) at fn (runtime-core.esm-bundler.js:6283:24) at gn (runtime-core.esm-bundler.js:6402:7) at fn (runtime-core.esm-bundler.js:6303:9) at En (runtime-core.esm-bundler.js:6382:15) at fn (runtime-core.esm-bundler.js:6283:24) at En (runtime-core.esm-bundler.js:6382:15) at fn (runtime-core.esm-bundler.js:6283:24) at gn (runtime-core.esm-bundler.js:6402:7) at fn (runtime-core.esm-bundler.js:6303:9) ``` Tested on two browsers, firefox 118.0 and Chromium 120.0.6099.129 ### Vikunja Frontend Version 0.22.0 ### Vikunja API Version v0.22.0 ### Browser and version Chromium Engine Version 120.0.6099.129 ### Can you reproduce the bug on the Vikunja demo site? Yes ### Screenshots ![Screenshot 2023-12-24 at 13.00.46.png](/attachments/386fa8be-ea51-44f2-8df1-5b2c526f8eca) ![Screenshot 2023-12-24 at 13.00.59.png](/attachments/ba0a6a7e-afca-4fcb-bbe5-4af5a7e95285)
fractalshine added the
kind/bug
label 2023-12-26 06:18:15 +00:00
Owner

You mean editing the description? Only with existing tasks or with new tasks as well?

You mean editing the description? Only with existing tasks or with new tasks as well?
Author

Only with one task with links to images inside.

Only with one task with links to images inside.
Owner

Does the task have any other attributes set? Can you reproduce this with another task with the same content?

Does the task have any other attributes set? Can you reproduce this with another task with the same content?
Author

Wow. I'm realized that I can't find a way how to paste image with link in new editor. When I'm trying to paste url it's pasting just an url to picture.

Wow. I'm realized that I can't find a way how to paste image with link in new editor. When I'm trying to paste url it's pasting just an url to picture.
Owner

You mean adding an image from an image link?

You mean adding an image from an image link?
Author

Exactly!

Exactly!
Owner

This was a consideration - we've had problems in the past with hotlinked images as they are not controlled by the Host Vikunja runs on. They could vanish or have restrictive CSP in place which makes them unlinkable. Uploading them will make sure they are persisted.

This was a consideration - we've had problems in the past with hotlinked images as they are not controlled by the Host Vikunja runs on. They could vanish or have restrictive CSP in place which makes them unlinkable. Uploading them will make sure they are persisted.
Author

In that case I can't reproduce.

This was a consideration - we've had problems in the past with hotlinked images as they are not controlled by the Host Vikunja runs on. They could vanish or have restrictive CSP in place which makes them unlinkable. Uploading them will make sure they are persisted.

Good point. But still if you hotlinked images in previous tasks, now you can't edit them properly.

UPD. I can reproduce. Even images pasted from clipboard breaks editor.

https://try.vikunja.io/tasks/79
https://try.vikunja.io/tasks/80


TypeError: ee is null
    insert runtime-dom.esm-bundler.js:10
    Oe runtime-core.esm-bundler.js:5189
    xe runtime-core.esm-bundler.js:5092
    je runtime-core.esm-bundler.js:5516
    Re runtime-core.esm-bundler.js:5407
    Be runtime-core.esm-bundler.js:5255
    xe runtime-core.esm-bundler.js:5116
    Kt runtime-core.esm-bundler.js:5861
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5902
    At runtime-core.esm-bundler.js:5729
    Le runtime-core.esm-bundler.js:5664
    xe runtime-core.esm-bundler.js:5128
    Kt runtime-core.esm-bundler.js:5861
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5902
    At runtime-core.esm-bundler.js:5729
    Le runtime-core.esm-bundler.js:5664
    xe runtime-core.esm-bundler.js:5128
    je runtime-core.esm-bundler.js:5516
    Re runtime-core.esm-bundler.js:5407
    Be runtime-core.esm-bundler.js:5255
    xe runtime-core.esm-bundler.js:5116
    Kt runtime-core.esm-bundler.js:5861
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5902
    callWithErrorHandling runtime-core.esm-bundler.js:158
    flushJobs runtime-core.esm-bundler.js:365
    promise callback*queueFlush runtime-core.esm-bundler.js:275
    queueJob runtime-core.esm-bundler.js:269
    Oe runtime-core.esm-bundler.js:1857
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:363
    triggerRefValue reactivity.esm-bundler.js:980
    effect reactivity.esm-bundler.js:1130
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:358
    triggerRefValue reactivity.esm-bundler.js:980
    set value reactivity.esm-bundler.js:1017
    N TipTap.vue:534
    setup TipTap.vue:520
    createHook runtime-core.esm-bundler.js:2764
    callWithErrorHandling runtime-core.esm-bundler.js:158
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:166
    __weh runtime-core.esm-bundler.js:2744
    flushPostFlushCbs runtime-core.esm-bundler.js:333
    flushJobs runtime-core.esm-bundler.js:371
    promise callback*queueFlush runtime-core.esm-bundler.js:275
    queueJob runtime-core.esm-bundler.js:269
    effect runtime-core.esm-bundler.js:5898
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:363
    triggerRefValue reactivity.esm-bundler.js:980
    set value reactivity.esm-bundler.js:1017
    setup runtime-core.esm-bundler.js:2454
    promise callback*setup runtime-core.esm-bundler.js:2453
    callWithErrorHandling runtime-core.esm-bundler.js:158
    setupStatefulComponent runtime-core.esm-bundler.js:7332
    setupComponent runtime-core.esm-bundler.js:7292
    qe runtime-core.esm-bundler.js:5687
    Le runtime-core.esm-bundler.js:5653
    xe runtime-core.esm-bundler.js:5128
    Fe runtime-core.esm-bundler.js:5373
    Ve runtime-core.esm-bundler.js:5279
    Be runtime-core.esm-bundler.js:5244
    xe runtime-core.esm-bundler.js:5116
    Kt runtime-core.esm-bundler.js:5797
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5902
    Ge runtime-core.esm-bundler.js:5910
    qe runtime-core.esm-bundler.js:5701
    Le runtime-core.esm-bundler.js:5653
    xe runtime-core.esm-bundler.js:5128
    Fe runtime-core.esm-bundler.js:5373
    Ve runtime-core.esm-bundler.js:5279
    Be runtime-core.esm-bundler.js:5244
    xe runtime-core.esm-bundler.js:5116
    Fe runtime-core.esm-bundler.js:5373
    Ve runtime-core.esm-bundler.js:5279
    Be runtime-core.esm-bundler.js:5244
    xe runtime-core.esm-bundler.js:5116
    Fe runtime-core.esm-bundler.js:5373
    Ve runtime-core.esm-bundler.js:5279
    Be runtime-core.esm-bundler.js:5244
    xe runtime-core.esm-bundler.js:5116
runtime-core.esm-bundler.js:226:12
    logError runtime-core.esm-bundler.js:226
    handleError$1 runtime-core.esm-bundler.js:208
    callWithErrorHandling runtime-core.esm-bundler.js:160
    flushJobs runtime-core.esm-bundler.js:365
    (Async: promise callback)
    queueFlush runtime-core.esm-bundler.js:275
    queueJob runtime-core.esm-bundler.js:269
    Oe runtime-core.esm-bundler.js:1857
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:363
    triggerRefValue reactivity.esm-bundler.js:980
    effect reactivity.esm-bundler.js:1130
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:358
    triggerRefValue reactivity.esm-bundler.js:980
    set value reactivity.esm-bundler.js:1017
    N TipTap.vue:534
    setup TipTap.vue:520
    createHook runtime-core.esm-bundler.js:2764
    callWithErrorHandling runtime-core.esm-bundler.js:158
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:166
    __weh runtime-core.esm-bundler.js:2744
    flushPostFlushCbs runtime-core.esm-bundler.js:333
    flushJobs runtime-core.esm-bundler.js:371
    (Async: promise callback)
    queueFlush runtime-core.esm-bundler.js:275
    queueJob runtime-core.esm-bundler.js:269
    effect runtime-core.esm-bundler.js:5898
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:363
    triggerRefValue reactivity.esm-bundler.js:980
    set value reactivity.esm-bundler.js:1017
    setup runtime-core.esm-bundler.js:2454
    (Async: promise callback)
    setup runtime-core.esm-bundler.js:2453
    callWithErrorHandling runtime-core.esm-bundler.js:158
    setupStatefulComponent runtime-core.esm-bundler.js:7332
    setupComponent runtime-core.esm-bundler.js:7292
    qe runtime-core.esm-bundler.js:5687
    Le runtime-core.esm-bundler.js:5653
    xe runtime-core.esm-bundler.js:5128
    Fe runtime-core.esm-bundler.js:5373
    Ve runtime-core.esm-bundler.js:5279
    Be runtime-core.esm-bundler.js:5244
    xe runtime-core.esm-bundler.js:5116
    Kt runtime-core.esm-bundler.js:5797
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5902
    Ge runtime-core.esm-bundler.js:5910
    qe runtime-core.esm-bundler.js:5701
    Le runtime-core.esm-bundler.js:5653
    xe runtime-core.esm-bundler.js:5128
    Fe runtime-core.esm-bundler.js:5373
    Ve runtime-core.esm-bundler.js:5279
    Be runtime-core.esm-bundler.js:5244
    xe runtime-core.esm-bundler.js:5116
    Fe runtime-core.esm-bundler.js:5373
    Ve runtime-core.esm-bundler.js:5279
    Be runtime-core.esm-bundler.js:5244
    xe runtime-core.esm-bundler.js:5116
    Fe runtime-core.esm-bundler.js:5373
    Ve runtime-core.esm-bundler.js:5279
    Be runtime-core.esm-bundler.js:5244
    xe runtime-core.esm-bundler.js:5116

In that case I can't reproduce. > This was a consideration - we've had problems in the past with hotlinked images as they are not controlled by the Host Vikunja runs on. They could vanish or have restrictive CSP in place which makes them unlinkable. Uploading them will make sure they are persisted. Good point. But still if you hotlinked images in previous tasks, now you can't edit them properly. UPD. I can reproduce. Even images pasted from clipboard breaks editor. https://try.vikunja.io/tasks/79 https://try.vikunja.io/tasks/80 ``` TypeError: ee is null insert runtime-dom.esm-bundler.js:10 Oe runtime-core.esm-bundler.js:5189 xe runtime-core.esm-bundler.js:5092 je runtime-core.esm-bundler.js:5516 Re runtime-core.esm-bundler.js:5407 Be runtime-core.esm-bundler.js:5255 xe runtime-core.esm-bundler.js:5116 Kt runtime-core.esm-bundler.js:5861 run reactivity.esm-bundler.js:178 update runtime-core.esm-bundler.js:5902 At runtime-core.esm-bundler.js:5729 Le runtime-core.esm-bundler.js:5664 xe runtime-core.esm-bundler.js:5128 Kt runtime-core.esm-bundler.js:5861 run reactivity.esm-bundler.js:178 update runtime-core.esm-bundler.js:5902 At runtime-core.esm-bundler.js:5729 Le runtime-core.esm-bundler.js:5664 xe runtime-core.esm-bundler.js:5128 je runtime-core.esm-bundler.js:5516 Re runtime-core.esm-bundler.js:5407 Be runtime-core.esm-bundler.js:5255 xe runtime-core.esm-bundler.js:5116 Kt runtime-core.esm-bundler.js:5861 run reactivity.esm-bundler.js:178 update runtime-core.esm-bundler.js:5902 callWithErrorHandling runtime-core.esm-bundler.js:158 flushJobs runtime-core.esm-bundler.js:365 promise callback*queueFlush runtime-core.esm-bundler.js:275 queueJob runtime-core.esm-bundler.js:269 Oe runtime-core.esm-bundler.js:1857 triggerEffect reactivity.esm-bundler.js:373 triggerEffects reactivity.esm-bundler.js:363 triggerRefValue reactivity.esm-bundler.js:980 effect reactivity.esm-bundler.js:1130 triggerEffect reactivity.esm-bundler.js:373 triggerEffects reactivity.esm-bundler.js:358 triggerRefValue reactivity.esm-bundler.js:980 set value reactivity.esm-bundler.js:1017 N TipTap.vue:534 setup TipTap.vue:520 createHook runtime-core.esm-bundler.js:2764 callWithErrorHandling runtime-core.esm-bundler.js:158 callWithAsyncErrorHandling runtime-core.esm-bundler.js:166 __weh runtime-core.esm-bundler.js:2744 flushPostFlushCbs runtime-core.esm-bundler.js:333 flushJobs runtime-core.esm-bundler.js:371 promise callback*queueFlush runtime-core.esm-bundler.js:275 queueJob runtime-core.esm-bundler.js:269 effect runtime-core.esm-bundler.js:5898 triggerEffect reactivity.esm-bundler.js:373 triggerEffects reactivity.esm-bundler.js:363 triggerRefValue reactivity.esm-bundler.js:980 set value reactivity.esm-bundler.js:1017 setup runtime-core.esm-bundler.js:2454 promise callback*setup runtime-core.esm-bundler.js:2453 callWithErrorHandling runtime-core.esm-bundler.js:158 setupStatefulComponent runtime-core.esm-bundler.js:7332 setupComponent runtime-core.esm-bundler.js:7292 qe runtime-core.esm-bundler.js:5687 Le runtime-core.esm-bundler.js:5653 xe runtime-core.esm-bundler.js:5128 Fe runtime-core.esm-bundler.js:5373 Ve runtime-core.esm-bundler.js:5279 Be runtime-core.esm-bundler.js:5244 xe runtime-core.esm-bundler.js:5116 Kt runtime-core.esm-bundler.js:5797 run reactivity.esm-bundler.js:178 update runtime-core.esm-bundler.js:5902 Ge runtime-core.esm-bundler.js:5910 qe runtime-core.esm-bundler.js:5701 Le runtime-core.esm-bundler.js:5653 xe runtime-core.esm-bundler.js:5128 Fe runtime-core.esm-bundler.js:5373 Ve runtime-core.esm-bundler.js:5279 Be runtime-core.esm-bundler.js:5244 xe runtime-core.esm-bundler.js:5116 Fe runtime-core.esm-bundler.js:5373 Ve runtime-core.esm-bundler.js:5279 Be runtime-core.esm-bundler.js:5244 xe runtime-core.esm-bundler.js:5116 Fe runtime-core.esm-bundler.js:5373 Ve runtime-core.esm-bundler.js:5279 Be runtime-core.esm-bundler.js:5244 xe runtime-core.esm-bundler.js:5116 runtime-core.esm-bundler.js:226:12 logError runtime-core.esm-bundler.js:226 handleError$1 runtime-core.esm-bundler.js:208 callWithErrorHandling runtime-core.esm-bundler.js:160 flushJobs runtime-core.esm-bundler.js:365 (Async: promise callback) queueFlush runtime-core.esm-bundler.js:275 queueJob runtime-core.esm-bundler.js:269 Oe runtime-core.esm-bundler.js:1857 triggerEffect reactivity.esm-bundler.js:373 triggerEffects reactivity.esm-bundler.js:363 triggerRefValue reactivity.esm-bundler.js:980 effect reactivity.esm-bundler.js:1130 triggerEffect reactivity.esm-bundler.js:373 triggerEffects reactivity.esm-bundler.js:358 triggerRefValue reactivity.esm-bundler.js:980 set value reactivity.esm-bundler.js:1017 N TipTap.vue:534 setup TipTap.vue:520 createHook runtime-core.esm-bundler.js:2764 callWithErrorHandling runtime-core.esm-bundler.js:158 callWithAsyncErrorHandling runtime-core.esm-bundler.js:166 __weh runtime-core.esm-bundler.js:2744 flushPostFlushCbs runtime-core.esm-bundler.js:333 flushJobs runtime-core.esm-bundler.js:371 (Async: promise callback) queueFlush runtime-core.esm-bundler.js:275 queueJob runtime-core.esm-bundler.js:269 effect runtime-core.esm-bundler.js:5898 triggerEffect reactivity.esm-bundler.js:373 triggerEffects reactivity.esm-bundler.js:363 triggerRefValue reactivity.esm-bundler.js:980 set value reactivity.esm-bundler.js:1017 setup runtime-core.esm-bundler.js:2454 (Async: promise callback) setup runtime-core.esm-bundler.js:2453 callWithErrorHandling runtime-core.esm-bundler.js:158 setupStatefulComponent runtime-core.esm-bundler.js:7332 setupComponent runtime-core.esm-bundler.js:7292 qe runtime-core.esm-bundler.js:5687 Le runtime-core.esm-bundler.js:5653 xe runtime-core.esm-bundler.js:5128 Fe runtime-core.esm-bundler.js:5373 Ve runtime-core.esm-bundler.js:5279 Be runtime-core.esm-bundler.js:5244 xe runtime-core.esm-bundler.js:5116 Kt runtime-core.esm-bundler.js:5797 run reactivity.esm-bundler.js:178 update runtime-core.esm-bundler.js:5902 Ge runtime-core.esm-bundler.js:5910 qe runtime-core.esm-bundler.js:5701 Le runtime-core.esm-bundler.js:5653 xe runtime-core.esm-bundler.js:5128 Fe runtime-core.esm-bundler.js:5373 Ve runtime-core.esm-bundler.js:5279 Be runtime-core.esm-bundler.js:5244 xe runtime-core.esm-bundler.js:5116 Fe runtime-core.esm-bundler.js:5373 Ve runtime-core.esm-bundler.js:5279 Be runtime-core.esm-bundler.js:5244 xe runtime-core.esm-bundler.js:5116 Fe runtime-core.esm-bundler.js:5373 Ve runtime-core.esm-bundler.js:5279 Be runtime-core.esm-bundler.js:5244 xe runtime-core.esm-bundler.js:5116 ```
konrad added the
confirmed
label 2024-01-04 12:27:17 +00:00
Owner

This is now fixed in 0b3604d167. Please check with the latest unstable build (on try) to see if the problem went away.

This is now fixed in [0b3604d167](https://kolaente.dev/vikunja/frontend/commit/8ea97f3ffc16eb795badf623bd195cd9b8d9a388). Please check with the latest unstable build (on [try](https://try.vikunja.io)) to see if the problem went away.
Sign in to join this conversation.
No Milestone
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: vikunja/vikunja#2086
No description provided.