Project

General

Profile

Actions
Copy link

Bug #103972

closed

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

Added by Tobias Gülzow about 1 year ago. Updated about 2 months ago.

Status:
Resolved
Priority:
Should have
Assignee:
-
Category:
Backend JavaScript
Target version:
-
Start date:
2024-06-04
Due date:
% Done:

100%

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 3 (1 open — 2 closed)

Related to TYPO3 Core - Bug #105791: Bug with image focus area?Closed2024-12-08

Actions
Related to TYPO3 Core - Bug #106816: Multiple FocusArea boxes on switching aspect ratioUnder Review2025-06-03

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

Actions
Actions
Copy link
 #1

Updated by Garvin Hicking about 1 year 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 about 1 year 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 about 1 year 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 about 1 year 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 about 1 year 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 about 1 year 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 12 months ago

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

Updated by Garvin Hicking 12 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
 #9

Updated by Thomas Sam Wittich 6 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!

Actions
Copy link
 #10

Updated by Thomas Sam Wittich 6 months ago

  • Related to Bug #105791: Bug with image focus area? added
Actions
Copy link
 #11

Updated by Thomas Sam Wittich 2 months ago

Thomas Sam Wittich wrote in #note-9:

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!

Dear Garvin,

i still constantly fall into this pit. (Working with FF mainly).

I guess, it's more than just a "should have" - since the focus-area-feature comes more and more in place (at least with my TYPO3-integrations).

You provided already a patch: https://forge.typo3.org/issues/101800

Is it / was it going to the latest TYPO3 v12 and v13 releases, means, the bug is solved already?
(i use 12.4.27 now and did not see a mentioning of this bugfix / patch in der release notes of 12.4.28)

Garvin, any clue about how the next steps to solve it would be wonderful.
Can i do something for it?

Thank you, Thomas

Actions
Copy link
 #12

Updated by Garvin Hicking 2 months ago

Hi,

Sadly my own JS skills are insufficient to solve this issue.

The patch you linked as abandoned with a "not working" remark, so I was just guessing there were problems, but not which.

So: there currently is no patch approved or pending which addresses the issue.

I will kindly ask the most skilled JS developer I know in our team if he see's a way forward with this. 🤞🏻

Actions
Copy link
 #13

Updated by Gerrit Code Review about 2 months ago

  • Status changed from Accepted to Under Review

Patch set 1 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/89140

Actions
Copy link
 #14

Updated by Gerrit Code Review about 2 months ago

Patch set 2 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/89140

Actions
Copy link
 #15

Updated by Gerrit Code Review about 2 months ago

Patch set 3 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/89140

Actions
Copy link
 #16

Updated by Gerrit Code Review about 2 months ago

Patch set 4 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/89140

Actions
Copy link
 #17

Updated by Gerrit Code Review about 2 months ago

Patch set 5 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/89140

Actions
Copy link
 #18

Updated by Gerrit Code Review about 2 months ago

Patch set 6 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/89140

Actions
Copy link
 #19

Updated by Gerrit Code Review about 2 months ago

Patch set 7 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/89140

Actions
Copy link
 #20

Updated by Gerrit Code Review about 2 months ago

Patch set 1 for branch 13.4 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/89255

Actions
Copy link
 #21

Updated by Gerrit Code Review about 2 months ago

Patch set 1 for branch 12.4 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/89256

Actions
Copy link
 #22

Updated by Anonymous about 2 months ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100
Actions
Copy link
 #23

Updated by Sascha Löffler 10 days ago

  • Related to Bug #106816: Multiple FocusArea boxes on switching aspect ratio added
Actions
Copy link

Also available in: Atom PDF