Skip to content

[Head links] Reorder of links when minification is enabled if one link is minified #39762

Open
@bhennesAdv

Description

@bhennesAdv

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”.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Reported on 2.4.7-p4Indicates original Magento version for the Issue report.Triage: Dev.ExperienceIssue related to Developer Experience and needs help with Triage to Confirm or Reject it

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions