Skip to content

How to upgrade jQuery version from 1.12.4 to 3.7.1 in Magento 2.4?

We are using Magento 2.4.2-p2, and the current jQuery version is 1.12.4. We want to upgrade it to version 3.7.1.

Here’s what I’ve tried so far:

Options 1 – Added the following in default_head_blocks.xml:

<head>
    <script src="js/jquery.min.js"/>
    <script src="js/jquery-migrate.min.js"/>
</head>

Options 2 – Configured requirejs-config.js with the following code:

var config = {
    paths: {
        'jquery': 'js/jquery.min',
        'jquery/compat': 'js/compat:', // Avoid loading non-existing `compat.js`
        'jquery/migrate': 'js/jquery-migrate.min', // Path to jquery-migrate if needed
        'jquery.cookie': 'js/jquery.cookie', // Path for plugins
        'jquery.mobile.custom': 'empty:', // Avoid loading non-existing `jquery.mobile.custom.js`
        'jquery.storageapi': 'empty:' // Avoid loading non-existing `jquery.storageapi.js`
    },
    map: {
        '*': {
            'jquery': 'js/jquery.min',
            '$': 'js/jquery.min',
            'jQuery': 'js/jquery.min'
        }
    },
    shim: {
        'js/jquery.min': {
            exports: ['jQuery', '$']
        },
        'jquery/migrate': {
            deps: ['jquery']
        },
        'jquery.cookie': {
            deps: ['jquery']
        }
    }
};

jQuery upgrade with first options but others things are not working.

What is the correct approach to upgrade jQuery in Magento 2.4.2-p2?