Magento2: Incompatibilies with jQuery 3

[kirmorozov]

We'd like to use tools that are standard in web development industry.
This includes latest jQuery.

Preconditions

1. I use Bootstrap 4
2. I want to use navigation and other scripts.

Steps to reproduce

1. npm install jquery
2. Copy jquery.js to you your theme
3. Build theme.
4. Open product page with configurable product.

Expected result

1. No errors

Actual result

1. size() is not defined (http://api.jquery.com/size/ was deleted from jQuery 3)

[magento-engcom-team]

@kirmorozov, thank you for your report.
We've acknowledged the issue and added to our backlog.

[orlangur]

Such bug report is not valid. While jQuery, like any other third party library, can definitely be upgraded via one or more PRs, core is not supposed to be forward compatible with any version but only with ones actually used.

[magento-engcom-team]

Hi @kirmorozov. Thank you for your report.
The issue has been fixed in magento/magento2#13688 by @kirmorozov in 2.3-develop branch
Related commit(s):

• c36fb765a26f91a92bddfc23c65766fbc561e9ec
• b21f2a6dd30d79cb0bd0e782caab202834b57655

The fix will be available with the upcoming 2.3.0 release.

[kirmorozov]

Main concern was .browser from https://github.com/magento/magento2/issues/14267
Its resolved.

[magento-engcom-team]

Hi @kirmorozov. Thank you for your report.
The issue has been fixed in magento/magento2#14637 by @kirmorozov in 2.3-develop branch
Related commit(s):

• ae229f95795644518f38ea9cf7d73d1daff80b83
• b25d28ff97a454e72d4a481babb311a43b8da16d
• ae43898fe673d1688aad5e3b1dad3b447d7537cf

The fix will be available with the upcoming 2.3.0 release.

[kirmorozov]

Here is one more related PR https://github.com/magento/magento2/pull/14268

[kirmorozov]

@antonkril @okorshenko @vrann Please check it and make sure we are up-to-date with major js libraries.

[DanielRuf]

We'd like to use tools that are standard in web development industry.
This includes latest jQuery.

Just to mention it, the "new" standard is to not use jQuery and use Babel to transpile JavaScript (ES6) / TypeScript to ES5 using browserslist.

jQuery is huge and mostly not needed imho.

[kirmorozov]

@DanielRuf Yes, new, fancy JS, but:

1. Backward compatibility is what keeps your system running.
   And most of the web is running due to Linux backward compatibility.
2. We have to inject js processing via nodejs within the core. https://github.com/magento/magento2/issues/14646 Will start this process. Feel free to join.

Babel, another beast to worship, like redis or varnish or nginx, it will be part of the build process sooner or later.
Hyper, premature optimization kills, just look at overlearning in machine learning.

[DanielRuf]

I will do some planning how we could get there (browserslist config + webpack + babel).

[leoquijano]

I'm all for new cool stuff with tangible benefits.

But having jQuery upgraded to a recent version (v3) is important for all of us that are working with third party libraries (sliders, carousels, plugins included in extensions, etc), and can't just make the switch. I don't think jQuery is going away any time soon, and for some use cases it's very practical.

Magento is using a fairly old version of the library, which means that extensions usually can't upgrade it without too many complications, and that will be stuck with some bugs that are present in old versions of the library. This upgrade would be very useful if it can be included in the next major release.

[DanielRuf]

Sure.

Just to mention it

It was just meant as notice.

[DanielRuf]

This upgrade would be very useful if it can be included in the next major release.

Totally agree with this.

[kirmorozov]

@VladimirZaets was assigned to latest PR,
There might be 3-4-5 other issues found after complete MFTF run, can be resolved easily.

[zetlen]

If jQuery can be upgraded to the 3.x release stream without significant regression, then we could do it. But we can't set a precedent where we keep all of the core lib/ support libraries up to date. A lot of working software may be reliant on behaviors that are peculiar to those versions. Semantic versioning can only protect us so much from this.

I sympathize with @leoquijano in being forced to use older versions of plugins, but the jQuery install base is still largely 1.x, and so the community of plugin authors usually do maintain 1.x compatibility. Alternatives are likely to exist.

So again, in the individual case, I support experimenting with jQuery 3, but I think it's likely that an upgrade would break more functionality than it would enable.

[leoquijano]

@zetlen, I would be more concerned about what jQuery version is expected by the other libraries, and not by the global use base. If we were concerned by that metric, we wouldn't be using PHP 7 either, since 82.7% of the global installations use v5.x.

Since jQuery is such a critical library, having an old version of it is probably blocking upgrades for the other libraries, and not the other way around. Keep in mind that a jQuery Migrate v3 plugin is available to smooth out the upgrade process. That effectively makes it look like we have v1.12 in terms of backwards compatibility.

[zetlen]

@leoquijano We're not officially refusing a jQuery 3 upgrade because of that install base metric. It's just a stat to help us all weigh the costs and benefits.

Again, we're open to a PR to upgrade to jQuery 3, considering its special role as a nearly global dependency. But I want to avoid:

• Unforeseen regressions in popular third party modules
• A combination of modules that loads jQuery 3 and jQuery 1.12 at the same time

We all probably want such a PR to have safeguards in place to prevent that last thing in particular. Maybe \Magento\Framework\RequireJs could have a server-side sanity check in place to check for multiple jQuery versions.

[leoquijano]

Thanks @zetlen. There are a few PRs already in progress, if I understand correctly?

[zetlen]

That's right! I'm just stating on this thread our requirements for such a PR to merge. Thanks!

[piotrekkaminski]

@zetlen any update on this one? It is too risky to get into a patch release but it would be super helpful for 2.4 branch as it helps us address major security questions.

[zetlen]

@piotrekkaminski Nobody has sent me a jQuery upgrade PR to review, but I also haven't looked for one. The things we are looking for are still the same:

• an upgrade to current-state jQuery 3
• "Migration" plugins as necessary to cover breaking changes
• Refactoring where any regressions occur
• No visible test regression
• Some kind of safeguard to prevent a downstream theme from loading more than one jQuery version at once

I would be really excited to see such a change, and though there is a regression risk, I think it's digestible by an ambitious community developer.

[piotrekkaminski]

@zetlen so this PR only solves your first point not the others, right? https://github.com/magento/magento2/pull/15531

[zetlen]

@piotrekkaminski It may satisfy the following, too:

• Refactoring where any regressions occur
• No visible test regression

But without seeing the output of an end to end test, we can't be sure!

[kirmorozov]

@piotrekkaminski Hello old friend.
This initiative is there since April and I have jQuery 3 in production for front-end.
Its been few months since I put a bit of an effort to fix tests and minor core incompatibilities.
Everything else was pushed to the core before April.

[kirmorozov]

@piotrekkaminski
When do you expect to have end-to-end tests?
I expect to put it in production as early as Magento 2.3 Production release.

[ghost]

Hi @kirmorozov, thank you for you report, this issue has already fixed in 2.3-develop branch, and available on 2.3.0 release.

[orlangur]

@engcom-backlog-nazar are you sure? https://github.com/magento/magento2/blob/2.3-develop/lib/web/jquery.js#L2

[ghost]

@orlangur hmm.., but this comment -> https://github.com/magento/magento2/issues/13685#issuecomment-373909529

[Erfans]

is there any update? since the the jQuery version is still v1.12.4 https://github.com/magento/magento2/blob/2.3.2/lib/web/jquery.js#L2