search

magesuite / magepack

Next generation Magento 2 advanced JavaScript bundler.
Open Software License 3.0
438 stars 91 forks source link

Issue with jquery-ui-effect (Magento 2.4.4) #140

Closed Amadeco closed 2 years ago

Amadeco commented 2 years ago

Edit 03/05/2022 : Just remove the two files from the magepack.config.js to solve the issue...

Good afternoon,

I have a situation with your wonderful extension and the new released magento 2.4.4 version. Indeed, the two files from jquery-ui updated framework :

  1. lib/web/jquery/ui-modules/effects/effect-fade.js
  2. lib/web/jquery/ui-modules/effects/effect-blind.js

Which were reworked from the previous version, throws an error only when I magepack them (with the standard minification and bundle I do not have any issue).

This is the error I have in my developer console for the homepage : Uncaught Error: Mismatched anonymous define() module: function($){"use strict";return $.effects.define("fade","toggle",(function(e,t){var n="show"===e.mode;$(this).css("opacity",n?0:1).animate({opacity:n?1:0},{queue:!1,duration:e.duration,easing:e.easing,complete:t})}))}

This error is also throwed by blind effect.

So far, I can either remove them from the magepack.config.js (requirejs we will download them as standalone version) or correct them manually by naming them.

Exemple for effect-fade.js : 


/*!
 * jQuery UI Effects Fade 1.13.0
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 */

//>>label: Fade Effect
//>>group: Effects
//>>description: Fades the element.
//>>docs: http://api.jqueryui.com/fade-effect/
//>>demos: http://jqueryui.com/effect/

( function( factory ) {
    "use strict";

    if ( typeof define === "function" && define.amd ) {

        // AMD. Naming the module
        define('jquery-ui-effect-fade', [
        // AMD. Register as an anonymous module.
        //define( [
            "jquery",
            "../version",
            "../effect"
        ], factory );
    } else {

        // Browser globals
        factory( jQuery );
    }
} )( function( $ ) {
"use strict";

return $.effects.define( "fade", "toggle", function( options, done ) {
    var show = options.mode === "show";

    $( this )
        .css( "opacity", show ? 0 : 1 )
        .animate( {
            opacity: show ? 1 : 0
        }, {
            queue: false,
            duration: options.duration,
            easing: options.easing,
            complete: done
        } );
} );

} );

These two JS files are used for :

a Pull Request advice to suppress them for the native code of Magento for native CSS Transition and native function from jQuery itself : https://github.com/magento/magento2/pull/32886

Not sure if this error come from our current configuration as it heavy customized,

Did you meet this issue also on Magento 2.4.4 ?

Magento 2.4.4 have also a mapping error for Magento_Theme module (which is not related to my current issue) : https://github.com/magento/magento2/issues/35327

NathanDayFE commented 2 years ago

I have had the same issue and to work around this temporarily decided to go with naming the modules, however my issue wasn't just with the 2 classes mentioned in the OP description but with most of the jQuery UI effects. The main reason for naming rather than removing is that when the config was generated again the changes would again have to be made manually and there would be a chance this would be missed, instead i have created a .patch to be installed when composer runs.

Patch for magento/magento2-base

diff --git a/lib/web/jquery/ui-modules/effects/effect-blind.js b/lib/web/jquery/ui-modules/effects/effect-blind.js
index 3b65a4f..513a89b 100644
--- a/lib/web/jquery/ui-modules/effects/effect-blind.js
+++ b/lib/web/jquery/ui-modules/effects/effect-blind.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-blind', [
            "jquery",
            "../version",
            "../effect"
diff --git a/lib/web/jquery/ui-modules/effects/effect-bounce.js b/lib/web/jquery/ui-modules/effects/effect-bounce.js
index 76e0f85..c5b1c1f 100644
--- a/lib/web/jquery/ui-modules/effects/effect-bounce.js
+++ b/lib/web/jquery/ui-modules/effects/effect-bounce.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-bounce', [
            "jquery",
            "../version",
            "../effect"
diff --git a/lib/web/jquery/ui-modules/effects/effect-clip.js b/lib/web/jquery/ui-modules/effects/effect-clip.js
index 12b49f4..5954547 100644
--- a/lib/web/jquery/ui-modules/effects/effect-clip.js
+++ b/lib/web/jquery/ui-modules/effects/effect-clip.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-clip', [
            "jquery",
            "../version",
            "../effect"
diff --git a/lib/web/jquery/ui-modules/effects/effect-drop.js b/lib/web/jquery/ui-modules/effects/effect-drop.js
index 8f3ba74..3451b06 100644
--- a/lib/web/jquery/ui-modules/effects/effect-drop.js
+++ b/lib/web/jquery/ui-modules/effects/effect-drop.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-drop', [
            "jquery",
            "../version",
            "../effect"
diff --git a/lib/web/jquery/ui-modules/effects/effect-explode.js b/lib/web/jquery/ui-modules/effects/effect-explode.js
index f3976fc..546c81b 100644
--- a/lib/web/jquery/ui-modules/effects/effect-explode.js
+++ b/lib/web/jquery/ui-modules/effects/effect-explode.js
@@ -21,7 +21,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-explode', [
            "jquery",
            "../version",
            "../effect"
diff --git a/lib/web/jquery/ui-modules/effects/effect-fade.js b/lib/web/jquery/ui-modules/effects/effect-fade.js
index f84d6c4..d523404 100644
--- a/lib/web/jquery/ui-modules/effects/effect-fade.js
+++ b/lib/web/jquery/ui-modules/effects/effect-fade.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-fade', [
            "jquery",
            "../version",
            "../effect"
diff --git a/lib/web/jquery/ui-modules/effects/effect-fold.js b/lib/web/jquery/ui-modules/effects/effect-fold.js
index 682af57..c2e8a06 100644
--- a/lib/web/jquery/ui-modules/effects/effect-fold.js
+++ b/lib/web/jquery/ui-modules/effects/effect-fold.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-fold', [
            "jquery",
            "../version",
            "../effect"
diff --git a/lib/web/jquery/ui-modules/effects/effect-highlight.js b/lib/web/jquery/ui-modules/effects/effect-highlight.js
index 41ecc6f..7c6b72c 100644
--- a/lib/web/jquery/ui-modules/effects/effect-highlight.js
+++ b/lib/web/jquery/ui-modules/effects/effect-highlight.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-highlight', [
            "jquery",
            "../version",
            "../effect"
diff --git a/lib/web/jquery/ui-modules/effects/effect-puff.js b/lib/web/jquery/ui-modules/effects/effect-puff.js
index 4448843..737049b 100644
--- a/lib/web/jquery/ui-modules/effects/effect-puff.js
+++ b/lib/web/jquery/ui-modules/effects/effect-puff.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-puff', [
            "jquery",
            "../version",
            "../effect",
diff --git a/lib/web/jquery/ui-modules/effects/effect-pulsate.js b/lib/web/jquery/ui-modules/effects/effect-pulsate.js
index 0787e2a..7138c8a 100644
--- a/lib/web/jquery/ui-modules/effects/effect-pulsate.js
+++ b/lib/web/jquery/ui-modules/effects/effect-pulsate.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-pulsate', [
            "jquery",
            "../version",
            "../effect"
diff --git a/lib/web/jquery/ui-modules/effects/effect-scale.js b/lib/web/jquery/ui-modules/effects/effect-scale.js
index 0e4c291..af65927 100644
--- a/lib/web/jquery/ui-modules/effects/effect-scale.js
+++ b/lib/web/jquery/ui-modules/effects/effect-scale.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-scale', [
            "jquery",
            "../version",
            "../effect",
diff --git a/lib/web/jquery/ui-modules/effects/effect-shake.js b/lib/web/jquery/ui-modules/effects/effect-shake.js
index b12eb1f..ed63687 100644
--- a/lib/web/jquery/ui-modules/effects/effect-shake.js
+++ b/lib/web/jquery/ui-modules/effects/effect-shake.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-shake', [
            "jquery",
            "../version",
            "../effect"
diff --git a/lib/web/jquery/ui-modules/effects/effect-size.js b/lib/web/jquery/ui-modules/effects/effect-size.js
index 91aeea7..dada2f1 100644
--- a/lib/web/jquery/ui-modules/effects/effect-size.js
+++ b/lib/web/jquery/ui-modules/effects/effect-size.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-size', [
            "jquery",
            "../version",
            "../effect"
diff --git a/lib/web/jquery/ui-modules/effects/effect-slide.js b/lib/web/jquery/ui-modules/effects/effect-slide.js
index 1ce84f0..90d1061 100644
--- a/lib/web/jquery/ui-modules/effects/effect-slide.js
+++ b/lib/web/jquery/ui-modules/effects/effect-slide.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-slide', [
            "jquery",
            "../version",
            "../effect"
diff --git a/lib/web/jquery/ui-modules/effects/effect-transfer.js b/lib/web/jquery/ui-modules/effects/effect-transfer.js
index 231a4e6..539fded 100644
--- a/lib/web/jquery/ui-modules/effects/effect-transfer.js
+++ b/lib/web/jquery/ui-modules/effects/effect-transfer.js
@@ -19,7 +19,7 @@
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
-       define( [
+       define('jquery-ui-effect-transfer', [
            "jquery",
            "../version",
            "../effect"
gwharton commented 2 years ago

generate sed --in-place -e "/jquery\/ui-modules\/effects\/effect-fade/d" magepack.config.js sed --in-place -e "/jquery\/ui-modules\/effects\/effect-blind/d" magepack.config.js bundle

leonhelmus commented 2 years ago

@NathanDayFE This resolved my issue i had with 2.4.4 :)

leonhelmus commented 2 years ago

@gwharton I also needed to remove both jquery/ui-modules/effects/effect-fade & /jquery/ui-modules/effects/effect-blind from the magepack.config.js. How did you resolve that?

leonhelmus commented 2 years ago

@NathanDayFE I also needed to have https://github.com/magento/magento2/pull/32886 to resolve the checkout issue we talked about.

domeglic commented 2 years ago

I ran into the same issue, but the patch provided by @NathanDayFE didn't quite work. I had to use different module names needed instead (patch)

Outside of checkout you don't see much wrong, but requirejs actually fails to load all dependencies because the effects modules don't load. You can type "require.s.contexts._.registry" in the console and check that some of the modules have depCount higher than 0, meaning those dependencies didn't yet load.

But in checkout the loader is only removed when requirejs finishes, which is why it is more apparent. The jquery effects need to be named correctly otherwise I guess they aren't found (I don't know much about requirejs)

Another solution that worked for me is what @gwharton suggested, to remove the effects from the magepack config.

Also I thought the PR #142 should have fixed this but it doesn't.

Amadeco commented 2 years ago

I am using these repositories to remove the jQuery effect from Magento :

https://github.com/vasilii-b/magento2-frontend-improvements (I found this one also : https://github.com/magesuite/magento-patches)

jeremycharron commented 2 years ago

Is there any official plan from the Magepack team to update this module? We have several projects internally that are waiting for support for Adobe Commerce 2.4.4 and 2.4.5.

One of our team tried suggested solutions in this thread without success.

josepaitamala commented 2 years ago

Also having issues here with Magepack and Magento 2.4.4, first with my old bundle files, I was getting a lot of TypeError: $.widget is not a function errors on Checkout page for all JS widget files that didn't have 'jquery-ui-modules/widget' as a dependency, if I go and added manually this dependency to each file then the checkout page would work, but I thought this would be tedious to create a patch for every single JS widget file to include 'jquery-ui-modules/widget' as a dependency. Another thing I noticed is that when trying to create a new magepack.config.js file, the paths for jquery files had changed from what it used to be 'jquery-ui-modules/widget': 'jquery/ui-modules/widget' into 'jquery/ui-modules/widget': 'jquery/ui-modules/widget' and then no JS was working but no error was showing in the console either, I don't know if the issue has something to do with this change of path naming maybe? But at the end the only way I could fix everything was by removing every jquery file from the magepack.config.js file. Any light to fix this Magepack and Magento 2.4.4 incompatibility would be appreciate it.

fredden commented 2 years ago

The mapping of jquery-ui-modules/widget to jquery/ui-modules/widget, still exists in the latest version of Magento: https://github.com/magento/magento2/blob/2.4.5/app/code/Magento/Theme/view/base/requirejs-config.js#L47 (and in 2.4.4) I don't know why magepack wouldn't have identified these mappings properly. If this is causing you difficulty, please can you raise a new issue with details of this error so this can be investigated properly.

If a JavaScript file doesn't correctly specify its dependencies then setting up magepack will often highlight this. This should be fixed in the JavaScript file itself, not in magepack. If these issues are showing up in core Magento code, I'll happily open pull requests to get these solved; please let us know what files are causing you difficulty so we can help identify the vendor to which you can report these errors. If it's your own code, then you'll need to specify your dependencies.

josepaitamala commented 2 years ago

Hi @fredden , thanks for the reply, I actually had not noticed the patch added by @domeglic here https://gist.github.com/domeglic/305f299372277d1a95d7dc587fa0f0bb , after adding this patch things worked, I am just not understanding why the files inside jquery/ui-modules/effects needed to have a defined name on each module so Magepack would work, but the ones inside jquery/ui-modules/widgets don't. If anyone can share some light here that would be great!

fredden commented 2 years ago

@josepaitamala my best guess is that something else loads these files on the page before your code runs. Thanks for confirming this is a duplicate of #140.

rhoerr commented 2 years ago

Based on a site running 2.4.5-p1, ui-modules/core may also trigger the anonymous define issue.

index 231a4e6..539fded 100644
--- a/lib/web/jquery/ui-modules/core.js
+++ b/lib/web/jquery/ui-modules/core.js
@@ -2,7 +2,7 @@
 ( function() {
 "use strict";

-define( [
+define('jquery/ui-modules/core', [
    "jquery",
    "./data",
    "./disable-selection",
niihal commented 1 year ago

please add steps how to apply it on ECE

fredden commented 1 year ago

@niihal apply what, where? This bug has been fixed in magepack. Please check you're using the latest version of magepack (the tool, not the Magento module).

amcguireweb commented 9 months ago

@niihal apply what, where? This bug has been fixed in magepack. Please check you're using the latest version of magepack (the tool, not the Magento module).

How would we make sure "we're using the latest version of magepack" on Adobe Commerce Cloud? We just updated to 2.4.6-p3 from 2.4.3 and are now experiencing these errors on checkout. We didn't experience them on 2.4.3 prior to updating.

$.effects.define is not a function

fredden commented 9 months ago

@amcguireweb that depends entirely on how you've set up your build steps for Cloud. If you're using something like this https://github.com/magesuite/magepack/issues/135#issuecomment-1050793036 then I'd expect you are already using the latest version. You can print out the version by running magepack --version. The latest version at time of writing is 2.11.2. https://github.com/magesuite/magepack/tags

nabeelfocus commented 7 months ago

We just updated to 2.4.6-p2 from 2.4.5-p1 and are now experiencing these errors on checkout minicart not update.i using latest magepack version 2.11.2.but the minicart has no content and doesn't update. When I refresh the page, the minicart still doesn't show it's content and it's count. When I proceed to the product page, everything is showing just fine.