Ajax calls broken Intermitently in Drupal 10

Please explain more in detail what breaks, how, in which situations etc.

We are running a Drupal 10 site. But intermittently, ajax on all over site gets break.
And we are clearing the Drupal cache, it works again. What could be the reason for this behaviour, we are not sure.

We would have to see technical information to provide technical help.

links with use-ajax class redirecting instead of opening pop up

This suggests a JavaScript error; are there any JS errors in the console when this happens?

Did you notice if this issue started after an update? You might also want to check the logs and JavaScript console for specific errors, and maybe try disabling the cache temporarily to see if that helps isolate the cause

I have started experiencing this, it might be the same issue as it's a fairly recent bug for me.

AJAX on forms stop working and work again after clearing cache. I can replicate the issue by following the below steps...

1) Clear the Drupal cache
2) Visit the page the form is on but have the ajax related params in the URL. E.g. https://www.mysite.com/form?ajax_form=1&_wrapper_format=drupal_ajax&_wrapper_format=drupal_ajax
3) Visit the form page as usual, AJAX is now broken

It seems that in step 2, caching for the form is happening, but it's caching empty values. It's caching empty values in the cache_data table. The cid is like js:theme_name:en:xxxx

I'm no expert, but to me the issue is the way the AssetResolver::getJsAssets creates the Cid name. It creates the same Cid name, even if the cache data is an array of empty/false values

I tried upgrading core after reading this 👉 https://www.drupal.org/project/drupal/issues/3443108 📌 Optimize AssetResolver caching Fixed but I still get the issue with Drupal version 10.3.6

Same problem on drupal 9.4

Send GET ajax request (cacheable).

1. Click your use-ajax link and check that everything works as expected.
2. Open network tab in dev tools and open this newly link with query params in new tab. For example link may be like this: https://mysite.com/ajax/menu?_wrapper_format=drupal_ajax&js=true&_drupal_ajax=1&ajax_page_state%5Btheme%5D=mytheme&ajax_page_state%5Btheme_token%5D=&ajax_page_state%5Blibraries%5D=bootstrap_barrio%2Fform%2Cbootstrap_barrio%2Fglobal-styling%2Cbootstrap_barrio%2Flinks%2Cbootstrap_barrio%2Fnode%2Cbootstrap_barrio%2Fslide_nav%2Cclientside_validation_jquery%2Fcv.jquery.ife%2Cclientside_validation_jquery%2Fcv.jquery.validate%2Cphotoswipe%2Fphotoswipe.init%2Csystem%2Fbase%2Ctortuf%2Fanalytics%2Ctortuf%2Fbootstrap%2Ctortuf%2Fglobal-styling%2Cviews%2Fviews.module%2Cwebform%2Fwebform.dialog
3. Clear the Drupal cache
4. Refresh that page in new tab or directly open your link https://mysite.com/ajax/menu?_wrapper_format=drupal_ajax&js=true&_drupal_ajax=1&ajax_page_state%5Btheme%5D=mytheme&ajax_page_state%5Btheme_token%5D=&ajax_page_state%5Blibraries%5D=bootstrap_barrio%2Fform%2Cbootstrap_barrio%2Fglobal-styling%2Cbootstrap_barrio%2Flinks%2Cbootstrap_barrio%2Fnode%2Cbootstrap_barrio%2Fslide_nav%2Cclientside_validation_jquery%2Fcv.jquery.ife%2Cclientside_validation_jquery%2Fcv.jquery.validate%2Cphotoswipe%2Fphotoswipe.init%2Csystem%2Fbase%2Ctortuf%2Fanalytics%2Ctortuf%2Fbootstrap%2Ctortuf%2Fglobal-styling%2Cviews%2Fviews.module%2Cwebform%2Fwebform.dialog
5. Get ajax error

Note:

For views everything works because generated path in views has query parametr view_dom_id that always new after cache rebuild and you couldn't pregenerate cache for this page