Actions
Bug #103972
open
"this.createRenderRoot is not a function" JavaScript error for the image focusArea with Firefox
Status:
Accepted
Priority:
Should have
Assignee:
-
Category:
Backend JavaScript
Target version:
-
Start date:
2024-06-04
Due date:
% Done:
0%
Estimated time:
TYPO3 Version:
12
PHP Version:
8.2
Tags:
Complexity:
Is Regression:
Sprint Focus:
Description
Hi everyone.
When using Firefox in the backend, and when you try to edit an Image with a focusArea, you get several JS errors:- Uncaught TypeError: this.createRenderRoot is not a function
- Uncaught TypeError: this.pointerEventNames is undefined
- Uncaught TypeError: this.createRenderRoot is not a function
- Setup a new TYPO3 12 lts (composer or classic)
- Install Firefox browser (it works fine in Chrome)
- Install the introduction package
- Add the tsConfig (see below) to the root page
- Go to the backend with the firefox bowser
- Add a new image element somewhere on any page
- Add an image to the element
- Open the image in the image editor
The focusArea does not render, and you get the JS error from above.
The used tsConfig:
TCEFORM.sys_file_reference.crop.config.cropVariants {
default {
title = Default
selectedRatio = NaN
focusArea {
x = 0.45
y = 0.45
width = 0.1
height = 0.1
}
}
}
See also : #103048
Tobi
Files
Updated by Garvin Hicking 8 months ago
- Status changed from New to Needs Feedback
Could you mention with which OS and Firefox version you tested this?
Are any other custom extensions involved or maybe Firefox plugins? The mentioned javascript methods are part of the shadow DOM operation, and I can't reproduce it here (MacOS 14.5, FF 126.0.1) with the steps you outlined, it works here
Updated by Tobias Gülzow 8 months ago
OS Version: Microsoft Windows 11 Pro
Patchlevel: 10.0.22631
Firefox version: 126.0.1
Firefox Plugins: None (I just switched them all off, tested again and got the same result).
Updated by Andreas Kienast 8 months ago
· Edited
I can at least reproduce the For whatever reason, Firefox only displayed the first error. I can now reproduce all of them.Uncaught TypeError: this.createRenderRoot is not a function error.
Updated by Andreas Kokott 8 months ago
I can confirm this issue on Firefox 126.0.1 (64-bit) on MacOs in a Typo3 12.4.15 installation
Uncaught TypeError: this.pointerEventNames is undefined
disconnectedCallback ..typo3/sysext/backend/Resources/Public/JavaScript/element/draggable-resizable-element.js:13
update ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
init ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
init ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
init ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
initializeCropperModal ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
show ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
promise callback*show/</< ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
show ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
trigger ..typo3/sysext/backend/Resources/Public/JavaScript/modal.js:53
render ..typo3/sysext/backend/Resources/Public/JavaScript/modal.js:20
handleEvent ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/lit-html.js:6
trigger ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
_showElement ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
Ut ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
o ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
Gt ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
_queueCallback ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
_showElement ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
show ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
Ut ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
show ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
Ut ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
o ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
Gt ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
_emulateAnimation ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
show ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
show ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
firstUpdated ..typo3/sysext/backend/Resources/Public/JavaScript/modal.js:13
_$AE ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
performUpdate ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
scheduleUpdate ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
_$ET ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
requestUpdate ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
_$Ev ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
b ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
s ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-element/lit-element.js:6
ModalElement ..typo3/sysext/backend/Resources/Public/JavaScript/modal.js:13
generate ..typo3/sysext/backend/Resources/Public/JavaScript/modal.js:53
advanced ..typo3/sysext/backend/Resources/Public/JavaScript/modal.js:53
show ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
triggerListener ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
delegateTo ..typo3/sysext/core/Resources/Public/JavaScript/event/regular-event.js:13
draggable-resizable-element.js:13:2242
Uncaught TypeError: this.createRenderRoot is not a function
connectedCallback ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
connectedCallback ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-element/lit-element.js:6
connectedCallback ..typo3/sysext/backend/Resources/Public/JavaScript/element/draggable-resizable-element.js:13
initFocusArea ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
update ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
init ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
init ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
init ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
initializeCropperModal ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
show ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
promise callback*show/</< ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
show ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
trigger ..typo3/sysext/backend/Resources/Public/JavaScript/modal.js:53
render ..typo3/sysext/backend/Resources/Public/JavaScript/modal.js:20
handleEvent ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/lit-html.js:6
trigger ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
_showElement ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
Ut ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
o ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
Gt ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
_queueCallback ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
_showElement ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
show ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
Ut ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
show ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
Ut ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
o ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
Gt ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
_emulateAnimation ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
show ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
show ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/bootstrap.js:7
firstUpdated ..typo3/sysext/backend/Resources/Public/JavaScript/modal.js:13
_$AE ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
performUpdate ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
scheduleUpdate ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
_$ET ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
requestUpdate ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
_$Ev ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
b ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js:6
s ..typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-element/lit-element.js:6
ModalElement ..typo3/sysext/backend/Resources/Public/JavaScript/modal.js:13
generate ..typo3/sysext/backend/Resources/Public/JavaScript/modal.js:53
advanced ..typo3/sysext/backend/Resources/Public/JavaScript/modal.js:53
show ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
triggerListener ..typo3/sysext/backend/Resources/Public/JavaScript/image-manipulation.js:13
delegateTo ..typo3/sysext/core/Resources/Public/JavaScript/event/regular-event.js:13
reactive-element.js:6:3154
Updated by Garvin Hicking 8 months ago
- Status changed from Needs Feedback to Accepted
ACK, thanks for the confirmation.
In fact I see the errors now too, my Inspector console was set to a filtered state (and it seems functionally it all works, I can still crop a file)
Updated by Andreas Kokott 8 months ago
Garvin Hicking wrote in #note-5:
ACK, thanks for the confirmation.
In fact I see the errors now too, my Inspector console was set to a filtered state (and it seems functionally it all works, I can still crop a file)
but the configured focus area isnt visible
Updated by Garvin Hicking 7 months ago
- Has duplicate Bug #101800: FocusArea does not work in Firefox added
Updated by Garvin Hicking 7 months ago
The focusArea bug is reproducible for me in v13 main with Firefox 127, too. See screenshot.
This seems to originate from Build/Sources/TypeScript/backend/image-manipulation.ts method initFocusArea() - somehow the web component is not converted in FireFox due to some ShadowDOM operation?
Updated by Thomas Sam Wittich about 2 months ago
· Edited
Before i found this bug here, i entered it as well her:
https://forge.typo3.org/issues/105791
In this bug a little video is available how it looks like. (Can't close it myself as duplicate, sorry)
Also, i could see the same Firefox console messages and verify that it's working in Chrome.
Thank you!
Updated by Thomas Sam Wittich about 2 months ago
- Related to Bug #105791: Bug with image focus area? added
Actions