Description
Preconditions and environment
Magento version : 2.4.7-p4
Javascript configuration :
- Minification enabled
- Every other javascript optimization disabled
Error might be linked to this Plugin (I did not dig enough but if I remove it, the links are not reordered) :
https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Csp/Plugin/AddDefaultPropertiesToGroupPlugin.php
Steps to reproduce
I'll base my step to reproduce on the module I installed, other area might be affected or not.
Create a custom module with the following files :
app/code/Custom
└── Module
├── etc
│ └── module.xml
├── registration.php
└── view
├── adminhtml
│ └── layout
│ └── adminhtml_system_config_edit.xml
└── base
└── web
└── js
├── test.dependency.js
└── test.min.js
Content of test.min.js
function testMyFunction() { console.log('the test function is called');}
Content of test.dependency.js
testMyFunction();
Content of adminhtml_system_config_edit.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link src="Custom_Module::js/test.min.js"/>
<link src="Custom_Module::js/test.dependency.js"/>
</head>
</page>
As you can see, there is an implicit dependency in the test.dependency.js which requires the previous script to be loaded first.
I know it's not a good practice but in some cases, in the module I detected the issue on, they include angular framework minified and angular components which cause them to crash.
Expected result
The loading order of the javascript dependencies must stay the same as we have an implicit dependency.
In the DOM, we should have something like this (Order matters):
[...]
<script type="text/javascript" integrity="sha256-XXXXXXXXXX=" crossorigin="anonymous" src="https://www.XXXXX/static/version1742912394/adminhtml/Magento/backend/en_US/Custom_Module/js/test.min.js"></script>
<script type="text/javascript" src="https://www.XXXXXX/static/version1742912394/adminhtml/Magento/backend/en_US/Custom_Module/js/test.dependency.min.js"></script>
[...]
Actual result
In the DOM, we have something like this (Order matters):
[...]
<script type="text/javascript" src="https://www.XXXXXX/static/version1742912394/adminhtml/Magento/backend/en_US/Custom_Module/js/test.dependency.min.js"></script>
[...]
<script type="text/javascript" integrity="sha256-XXXXXXXXXX=" crossorigin="anonymous" src="https://www.XXXXX/static/version1742912394/adminhtml/Magento/backend/en_US/Custom_Module/js/test.min.js"></script>
[...]
This is causing the test.dependency.js to crash the javascript.
Additional information
I don't know if this is an important issue or not because requirejs should be used to avoid javascript dependency on script loading order, but still, this is illogical for developers to see the links reordered without information about it.
Release note
No response
Triage and priority
- Severity: S0 - Affects critical data or functionality and leaves users without workaround.
- Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
- Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
- Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
- Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.