Contrib.social

JavaScript error when an image element with image sizes support is added via Ajax

Open on Drupal.org →
Created on 14 March 2025, about 1 month ago

Problem/Motivation

After updating to 4.0.0-rc5 which includes ✨ Update JS Component (image_sizes_extras merge ) Active the following JavaScript error occurs on my project:

Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
    at <instance_members_initializer> (image-sizes.js?v=1.0.4:23:29)
    at new <anonymous> (image-sizes.js?v=1.0.4:29:9)
    at parseHTML (ajax.js?v=10.4.4:1342:27)
    at Drupal.AjaxCommands.insert (ajax.js?v=10.4.4:1348:27)
    at ajax.js?v=10.4.4:1046:41

It is the following line in image-sizes.js file, where this.shadowRoot is undefined at that point:

img = this.shadowRoot.querySelector("img");

Steps to reproduce

  • In my scenario, I have a custom block type with an image field that is outputted using the Responsive image formatter utilizing a responsive image style that uses the Image sizes breakpoint group
  • When a block of this type is added via layout builder UI, the named error occurs and the area where the image is normally outputted stays empty
  • Reloading the layout builder UI page afterwards displays the image correctly

Proposed resolution

  • Rework JavaScript to work for elements added via Ajax as well

Remaining tasks

  • Create issue fork and MR to fix this issue

User interface changes

n/a

API changes

n/a

Data model changes

n/a

🐛 Bug report
Status

Active

Version

4.0

Component

Code

Created by

🇩🇪Germany hctom

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024