[SOLVED] XMLHttpRequest on the Main Thread is Deprecated

[kongondo]

Hi @adrian,

I am using a custom pw-panel and on page load, the first time I hover over its 'open' button, I get the following JavaScript warning in the console:

[Deprecation] Synchronous ?id=1083&s=1&c=1&_tracy_bar=js&v=2.8.3&XDEBUG_SESSION_STOP=1:485

XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

I haven't investigated it much but it seems on hover, pw-panel loads the html inside the panel, which in this case has alpine.js attributes. Here's the debug screenshot from the console:

Any ideas?

Thanks.

Edited September 6, 2021 by kongondo
marked as solved.

[Rudy]

If I am not mistaken, you need to set async: true.

[adrian]

@kongondo - it sounds like @Rudy is on the right track: https://stackoverflow.com/a/27046133/1524576

This comment on the same thread: https://stackoverflow.com/a/28478146/1524576 is also worth a read. 

The question I have though is which script is being load synchronously (and shouldn't). Is it perhaps fixable by putting async in the script tag on this line: https://github.com/nette/tracy/blob/da8677c87e4ed645523ea91e0b6cf1d595e60fe1/src/Tracy/Bar/assets/loader.phtml#L22

Maybe you could test that to see if it fixes things for you?

[adrian]

Or maybe the async needs to be in that XMLHttpRequest.prototype.open = function()

https://github.com/nette/tracy/blob/a386d3810439f4a72950ed96983b890409c32660/src/Tracy/Bar/assets/bar.js#L475

[kongondo]

27 minutes ago, adrian said:

This comment on the same thread: https://stackoverflow.com/a/28478146/1524576 is also worth a read. 

In my case dev tools says the initiator is JqueryCore.js, so that could be it, although I have no <script> tags in that part of the code. JqueryCore is calling alpine.js in this case. 

32 minutes ago, adrian said:

Is it perhaps fixable by putting async in the script tag on this line: https://github.com/nette/tracy/blob/da8677c87e4ed645523ea91e0b6cf1d595e60fe1/src/Tracy/Bar/assets/loader.phtml#L22

Maybe you could test that to see if it fixes things for you?

Sorry, no joy.

[adrian]

@kongondo - is there anyway I can easily replicate your setup?

[kongondo]

1 hour ago, kongondo said:

In my case dev tools says the initiator is JqueryCore.js, so that could be it, although I have no <script> tags in that part of the code. JqueryCore is calling alpine.js in this case. 

Correction. This actually seems to be the issue, sorry. I am calling alpine.js in an inline script. All that code lives inside a pw-panel. When I use the code outside a pw-panel,  I get no warnings. When used inside a pw-panel, I get the warning, unless I don't refer alpine.js. So, it seems alpine js and jQuery are clashing somehow. I'll try set up a test environment, but it might take a couple of days. Thanks for looking into the matter.

 

Edited August 30, 2021 by kongondo

[kongondo]

Hi @adrian,

I've debugged this further and the issue has nothing to do with Tracy (was just caught in the middle!), sorry. The issue persists even with Tracy disabled. It is a jQuery issue. No idea how I'll get around this. I have to load Alpine.js inline since (AFAIK) $config->scripts() does not support 'defer' which Alpine needs. Thanks.

[kongondo]

Just noting that I managed to resolve this (non-Tracy-related) problem. My script was getting sucked inside the pw panel markup due to loading order. All I had to do was to move my script markup before my pw panel markup. No more warnings, unnecessary ajax calls, etc ?.