Materialize: [0.99.0] jQuery >= 3.2.1 not fully backwards compatible, provide 2.2.4 as alternative version

[MacGyer]

Description

The version of jQuery >= 3.2.1 is not fully backwards compatible and leads to breaking applications.
If packages are required which use conflicting jQuery dependencies, the dependencies cannot be successfully resolved.

Repro Steps

Example:
Using composer with fxp-plugin to handle bower assets.
I.e. Yii2 requires jQuery 2.2.4. But when requiring materialize 0.99.0, Composer will actually emit an error of not being able to determine the correct jQuery version to install.

Composer update output

- yiisoft/yii2 2.0.12 requires bower-asset/jquery 2.2.*@stable | 2.1.*@stable | 1.11.*@stable | 1.12.*@stable -> satisfiable by bower-asset/jquery[2.2.4, 1.12.1-patch1].
- Can only install one of: bower-asset/jquery[3.2.1, 2.2.4].

Solution:
Provide "old" jQuery version 2.2.x as alternative package in bower.json:

 "dependencies": {
    "jquery": ">=2.2.4 || >=3.2.1"
  },

Thanks.

PS: Thanks for great work again with release 0.99.0!

[jacobq]

Also, for the 3.x version, why is >=3.2.1 required? I am stuck on 3.1.1 due to blocking regression: https://github.com/jquery/jquery/issues/3611

[DanielRuf]

Well, bower is dead. What happens if you pinpoint / add jQuery 2 as dependency to your composer file?

[vincentmorneau]

Wait, does that mean jQuery 3.2.1 is the minimum required version now?

If so, that's a huge deal breaker for existing apps stuck on 2.x.

[MacGyer]

This is how I understood the case, after studying bower.json

[jamiebarrow]

Seems the specific commit that upgraded to jQuery 3 is https://github.com/Dogfalo/materialize/commit/6c0f502ad5cc888638ca20c59f4d97c0fdf18d50

[DanielRuf]

@vincentmorneau you can use jQuery.noConflict() and multiple jQuery versions bound to different scopes.

@jamiebarrow sure, that's what the commit message says and we are going forward with the framework.

[jamiebarrow]

@DanielRuf yup, just sharing for info :) Seems the only issue was related to using .bind instead of .on? Presuming it might not be a huge impact on projects not really dependant on jQuery other than using Materialize, so was useful to see that for myself. We actually wrap Materialize in Angular directives (because we worked with a design company that didn't realize we're using Angular and were using Materialize), so hopefully will be an easy upgrade for us.

[jamiebarrow]

Regarding not using bower, we're using bower, and use the bower-npm-resolver to still use bower until we migrate, but via npm

[vincentmorneau]

@DanielRuf True, we can use jQuery.noConflict(), but according to https://github.com/Dogfalo/materialize/commit/6c0f502ad5cc888638ca20c59f4d97c0fdf18d50, looks like .on and .off should work on jQuery 2.x as well.

Is there any code in Materialize that works only on jQuery 3.x? The quick start docs indicates otherwise.

[Dogfalo]

It should be backwards compatible. This is a mistake on our part in
specifying 3.x
On Fri, Jun 23, 2017 at 6:25 AM Vincent Morneau [e-mail]
wrote:

@DanielRuf https://github.com/danielruf True, we can use
jQuery.noConflict(), but according to 6c0f502
https://github.com/Dogfalo/materialize/commit/6c0f502ad5cc888638ca20c59f4d97c0fdf18d50,
looks like .on and .off should work on jQuery 2.x as well.

Is there any code in Materialize that works only on jQuery 3.x? The quick
start docs indicates otherwise.
[image: image]
https://user-images.githubusercontent.com/5391291/27484079-dde54aac-57f5-11e7-99b0-64e2fbbe2db7.png

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/Dogfalo/materialize/issues/4872#issuecomment-310664619,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACpax2ef5lQuTp6eLJwkT80ZQ1BZGpBmks5sG7zigaJpZM4OC2L8
.

>

Doggy sends his greetings from Mars.

[vincentmorneau]

Thanks @Dogfalo that makes perfect sense.

[DanielRuf]

@vincentmorneau see https://github.com/Dogfalo/materialize/commit/0552c37d7cadaa5301019234f804dc08e6b58c98

[tomscholz]

I have to apologize. That was a mistake on my end.
It is wrong to force the user into using the latest version of jQuery around, so hat about this?:

"dependencies": {
  "jquery": ">=2.1.4"
},

With this approach the user could install any version that is greater than or equal to 2.1.4. If no other version is specified, the latest version will be chosen.

[DanielRuf]

@tomscholz would be an option. Would use jQuery by default and jQuery 2 if 2 is in the root package.json. But imho it makes not much sense to support IE10 and there is jQuery.noConflict() if people need different versions. It's time to move on.

[tomscholz]

@DanielRuf I understand your concerns regarding IE10, but I think this is something we should definitely look into soon but not now. Maybe with one of the next releases we could drop IE10 and move to a flexbox grid I don't know.... Anyhow. I think this: "jquery": ">=2.1.4", is currently the right approach.
cc @Dogfalo

[MacGyer]

Hey guys,

thanks for intensly debating this issue. Raising the same issue in the Yii2 community brought up similar discussions and fixes for the coming release.

Cheers and happy coding

[DanielRuf]

@tomscholz we should maybe print a message to the console that says that we will drop jQuery 2 in the future (forever), lower the jQuery requirement like you recommend and push a new release.

Get the version with jQuery.fn.jquery
or jQuery().jquery, split it at ., shift it or directly use the first element of the result and use console.log(our_warning_message); if it is equal to 2.

[tomscholz]

I just read https://github.com/jquery/jquery.com/issues/162, where it states, that jQuery 2.x is officially EOL. Maybe we should drop the support for 2.x, since it wouldn't make sense to support a unsupported package.

[DanielRuf]

Well, that's why I did not want to reset it to a lower jQuery requirement but it seems many developers and thirdparty libraries, scripts and CMS still use jQuery 2. In this case they can use jQuery.noConflict and other solutions but you know that this is not an easy task for most.

@Dogfalo what is your opinion about this? Should developers push thirdparty dependencies to be jQuery 3 compatible?

It's a bit hard as some have / want to support older browsers but this also prevents the usage of modern solutions (native jQuery alternatives for the DOM, flexbox, CSS grid, CSS variables and other features).

[jacobq]

Please note, my request is only to allow older 3.x versions (i.e. 3.1.1). I am not pushing to keep jQuery 2.x alive.

[DanielRuf]

@jacobq

It is about other frameworks like Yii2

Yii2 requires jQuery 2.2.4

[MacGyer]

Pushing to jQuery 3 is what we all should do (as with many other technologies).
Yii2 is a special case here, but they will go to jQuery 3 in the coming 2.0.13 release: https://github.com/yiisoft/yii2/issues/14338

The main reason I opened the issue is the versioning.
If Materializecss is using semver, the change to jQuery 3 should have been a new major as it breaks BC.

What about branching off?
Releasing 0.98.2 with jQuery 2, but not developing further (as LTS version maybe)?

Creating new release with jQuery 3 support and populate as current stable and actively developed version?

[DanielRuf]

I'm not sure why we never moved to 1.x.x.

[Dogfalo]

Changed jquery spec to ^2.1.4 for the time being. See 8555d1497906fb0867453eadf0d612d90e0b6dda