Drupal ajax error after D10 update from version 10.0.11 to 10.2.1

What is the error? There is a previously-reported Ajax problem in 10.2.1. Did you search?

Check you don't have whitespace before the opening PHP tag

I'm not sure if this issue is the same as the other ones filed in the queue.

Our users have reported this on our site as well after we migrated to 10.2. Adding blocks through Layout builder gives us an exception:

An error occurred during the execution of the Ajax response: TypeError: Cannot read properties of undefined (reading 'style')
(anonymous) @ ajax.js?v=10.2.0:1143
Promise.catch (async)
Drupal.Ajax.success @ ajax.js?v=10.2.0:1141
success @ ajax.js?v=10.2.0:584

which seems to be triggered by this error:
error = TypeError: Cannot read properties of undefined (reading 'style') at Object.resetPadding (https://[site]/core/misc/dialog/off-canvas/js/off-canvas.js?v=10.2.0:323:46)

Tested on Drupal 10.2.0

@cilefen
I have copied error from the console. Basically anything which needs drupal ajax is not working on site.
Opening media pop up, adding blocks using layout builder,configure layout. Pencil icon for quick edit is also disappeared.
Drupal.AjaxError
message
:
"\nAn AJAX HTTP error occurred.\nHTTP Result Code:
name
:
"AjaxError"
stack
:
"Error\n at http://crownestates-local.com/core/misc/ajax.js?v=10.2.1:196:32\n at http://crownestates-local.com/core/misc/ajax.js?v=10.2.1:1915:3"
[[Prototype]]
:
Error at http://crownestates-local.com/core/misc/ajax.js?v=10.2.1:196:32 at http://crownestates-local.com/core/misc/ajax.js?v=10.2.1:1915:3
constructor
:
ƒ (xmlhttp, uri, customMessage)
messages
:
Drupal.Message {messageWrapper: div.messages__wrapper}
arguments
:
null
caller
:
null
length
:
3
name
:
""
prototype
:
Error at http://crownestates-local.com/core/misc/ajax.js?v=10.2.1:196:32 at http://crownestates-local.com/core/misc/ajax.js?v=10.2.1:1915:3
[[FunctionLocation]]
:
ajax.js?v=10.2.1:103
[[Prototype]]
:
ƒ ()
[[Scopes]]
:
Scopes[3]
stack
:
"Error\n at http://crownestates-local.com/core/misc/ajax.js?v=10.2.1:196:32\n at http://crownestates-local.com/core/misc/ajax.js?v=10.2.1:1915:3"
[[Prototype]]
:
Object

Just adjusting the Issue Summary to fix formatting.

Analysis on this issue:
I have updated site from version 10.0.11 version 10.1.4 . No issue in ajax and quick edits visible.
Updated site from version 10.0.11 version 10.1.7 . No issue in ajax and quick edits visible.
Updated site from version 10.0.11 version 10.2.1.Issue in ajax and quick edits links disappeared.
I can confirm that there is issue in 10.2.1.

If I take the code from #11 and manually apply it ,it fixes ajax issue but quick edit issue is still there.

Updated to version 10.1.4 also not applying these patches
Could not apply patch! Skipping. The error was: Cannot apply patch https://www.drupal.org/files/issues/2022-06-17/2845144-67.patch →
https://www.drupal.org/files/issues/2023-06-15/1349080-521.patch → (node_access filters out accessible nodes when node is left joined (1349080))
Could not apply patch! Skipping. The error was: Cannot apply patch https://www.drupal.org/files/issues/2023-06-15/1349080-521.patc →

Is this issue a duplicate of 🐛 Uncaught TypeError: Cannot read properties of null (reading 'style') (toolbar.js) Needs work ?

Thanks @shaal. Your suggestion solved the Ajax error problem I had on LB. Don't know if it's related, but for me worked.

After Upgrade from D9 to D10 the Views AJAX pager call is breaking the function (click on "View pager" jumps to top of page, no new items are shown).
Please help me to find and resolve the issue.

This is also currently an issue on webforms when offcanvas is enabled for editing. For now we can switch to dialogs using webform settings, but would be nice if this could be fixed (or at least patched for now).

Hi! On my site, I found that the issues came with a custom module that had dependencies defined with the Migrate module.
After removing these unnecessary dependencies, all the problems are gone and it works like a charm.

I just encounter the same issue. -> #6

After I opened to delete modal in layout builder page and cancel to close, below error occured on console.

An error occurred during the execution of the Ajax response: TypeError: Cannot read

I understand the reason why this error is in off-canvas.js, because the style property is not exsisted in jQuery type.

This commit (https://git.drupalcode.org/project/drupal/-/commit/6a43b511df9e26aa5abf0...) changed the jQuery's css() to vanilla js script.

But, the variable of $mainCanvasWrapper is still type of jQuery.

So, the Drupal.offCanvas.$mainCanvasWrapper[0].style has type error.

I fixed it to change the type of $mainCanvasWrapper to NodeListOf and handle when the element is undefined.

If the code is wrong, I would like to be pointed out. :)

I just encounter the same issue. -> #6

After I opened to delete modal in layout builder page and cancel to close, below error occured on console.

An error occurred during the execution of the Ajax response: TypeError: Cannot read properties of undefined (reading 'style')

I understand the reason why this error is in off-canvas.js, because the style property is not exsisted in jQuery type.

This commit (https://git.drupalcode.org/project/drupal/-/commit/6a43b511df9e26aa5abf0...) changed the jQuery's css() to vanilla js script.

But, the variable of $mainCanvasWrapper is still type of jQuery.

So, the Drupal.offCanvas.$mainCanvasWrapper[0].style has type error.

I fixed it to change the type of $mainCanvasWrapper to NodeListOf and handle when the element is undefined.

If the code is wrong, I would like to be pointed out. :)

This will need an issue summary using standard issue template, most sections appear to be missing

Will need a failing test case to show the issue.

Could this be related? https://www.drupal.org/project/drupal/issues/3409505 🐛 Uncaught TypeError: Cannot read properties of null (reading 'style') (toolbar.js) Needs work

@Klemendev that issue is already on the related section of this issue (check on the left), and also referred by #10.

If that solves this issue too this should probably be closed as a duplicate.

Ok so in my tests, https://www.drupal.org/project/ajax_comments/issues/3412943 🐛 Delete comment modal dialog broken with Drupal 10.2.x Active is partially (see my comment at https://www.drupal.org/project/drupal/issues/3409505#comment-15461560 🐛 Uncaught TypeError: Cannot read properties of null (reading 'style') (toolbar.js) Needs work ) fixed by https://www.drupal.org/project/drupal/issues/3409505 🐛 Uncaught TypeError: Cannot read properties of null (reading 'style') (toolbar.js) Needs work , but not fixed at all by #16 from this issue.

Sorry to bother you. -> #17

I updated issue summary.
Could you review again?

Sorry for #21.
I misunderstood your issue.
My issue is the JS error, but not style.

The Needs Review Queue Bot → tested this issue.

While you are making the above changes, we recommend that you convert this patch to a merge request → . Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)

My issue is the JS error, but not style.

My issue is both in JS error (due to missing style) and missing style

I have used #35 10.2.1 patch in https://www.drupal.org/project/drupal/issues/3414753 🐛 Drupal ajax error after D10 update from version 10.0.11 to 10.2.1 Needs review and it worked.

You have linked to this same page where there is no #35 comment

I was struggling with this issue for the last month or two. All ajax modal links, views modals, pagination - everything was broken and I was stuck on drupal 10.1.

I saw a comment here about checking for extra space before opening <?php tags but disregarded it as I didn't think that would cause any issues even if present.

After trying every patch I could find with no luck I went through every php file in the project i'm working on (over 50 custom modules) and found one .module file with 1 blank line before the opening <?php tag. After removing that extra line all ajax modals now work again.

I have scanned the whole codebase with an automated script for any whitespace or new lines before <?php, but found none, however, I still experience AJAX problems such as modals not working. Is there something else I should also scan for?

Having this issue as well on 10.2.2 from 10.1.6. Checked for spacing on <?php but I didn't find anything.

Watching https://www.drupal.org/project/drupal/issues/3409885 🐛 Uncaught ajax.js error / exception Active as it seems more related to my specific issue.

#29 also fixed our issue. All of our contextual links stopped rendering after moving to 10.2. Discovered that our custom theme .theme file had a space before the opening <?php.

Removing that space resulted in contextual/renderer ajax call to succeed rather than fail. With a successful ajax call the

  Drupal.theme.contextualTrigger = function () {
    return '<button class="trigger visually-hidden focusable" type="button"></button>';
  };

worked, giving us our buttons back.

With 10.2.6 I was having similar Ajax, check your developer console errors trying to create media files. Searching for a space before <?php wasn't showing much EXCEPT that I found a couple of instances in phpunit.xml files from when I had been doing some testing last year. At times I had to customize versions of PHPunit.xml to deal with various testing demands and so had different versions lying around. The PHP statement is not right at the top of the file the way it normally is.

I'm not currently doing any testing but I've removed the blank space that's buried in the various phpunit.xml files and got through an afternoon of media work without any Ajax / see your developer console errors. I'm just searching in PHPstorm projects and testing on a local dev site.

I had same issue on a custom theme from @gavias. Just had to remove a linebreak on a theme/ file and it's okay.
Btw it can cause issue with whitespace or linebreaks.

As soon as it was fixed, all is good now.

I was having the issue on 10.2.6. On layout builder edit mode, I was clicking "add section", then closing the dialog. Then if I clicked "add block", it would trigger the ajax error. I've updated to 10.2.7 and applied the patch, it fixed my issue. Thank you for the patch!

@gwvoigt, what patch did you applied for Drupal 10.2.7? Thank you

In my case there was a space above <?php in settings.php. I removed this space y the problem resolved.

Fixes are made on on 11.x (our main development branch) first, and are then back ported as needed according to our policies. Also, 10.2 is in security mode now.

Like others here, removing a space before <?php in a settings.local.php resolved this for me.

I had no problems on 10.1, 10.2, or 10.3. On 10.3.1 now, php 8.3.

For me, the reason was the encoding of a .module file of a custom module. It was set to UTF-8-BOM. After changing it to UTF-8 without BOM, the ajax errors are gone.

Patch for 10.3.5