Project

General

Profile

Actions
Copy link

Bug #103972

open

"this.createRenderRoot is not a function" JavaScript error for the image focusArea with Firefox

Added by Tobias Gülzow 5 months ago. Updated 4 months ago.

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:
  1. Uncaught TypeError: this.createRenderRoot is not a function
  2. Uncaught TypeError: this.pointerEventNames is undefined
  3. Uncaught TypeError: this.createRenderRoot is not a function
How to reproduce:
  1. Setup a new TYPO3 12 lts (composer or classic)
  2. Install Firefox browser (it works fine in Chrome)
  3. Install the introduction package
  4. Add the tsConfig (see below) to the root page
  5. Go to the backend with the firefox bowser
  6. Add a new image element somewhere on any page
  7. Add an image to the element
  8. 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

Screenshot 2024-06-25 at 13.00.24.png (968 KB) Screenshot 2024-06-25 at 13.00.24.png Garvin Hicking, 2024-06-25 11:08

Related issues 1 (1 open — 0 closed)

Has duplicate TYPO3 Core - Bug #101800: FocusArea does not work in Firefox Under Review2023-08-30

Actions
Actions
Copy link
 #1

Updated by Garvin Hicking 5 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

Actions
Copy link
 #2

Updated by Tobias Gülzow 5 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).

Actions
Copy link
 #3

Updated by Andreas Kienast 5 months ago · Edited

I can at least reproduce the Uncaught TypeError: this.createRenderRoot is not a function error. For whatever reason, Firefox only displayed the first error. I can now reproduce all of them.

Actions
Copy link
 #4

Updated by Andreas Kokott 5 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

Actions
Copy link
 #5

Updated by Garvin Hicking 5 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)

Actions
Copy link
 #6

Updated by Andreas Kokott 5 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

Actions
Copy link
 #7

Updated by Garvin Hicking 4 months ago

  • Has duplicate Bug #101800: FocusArea does not work in Firefox added
Actions
Copy link
 #8

Updated by Garvin Hicking 4 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?

Actions
Copy link

Also available in: Atom PDF