Issue with JS after update to 2.11.0

[SerhiiMandrykin]

After updating our magepack to the version 2.11.0 we were facing the error like:

Uncaught Error: Mismatched anonymous define() module: function(t,o){var l=void 0!==t?t:{};l.exportSymbol=function(e,t){for(var i=e.split(“.”),n=l,s=0;s<i.length-1;s++)n=n[i[s]];n[i[i.length-1]]=t},l.exportProperty=function(e,t,i){e[t]=i},l.version=“3.5.1",l.exportSymbol(“version”,l.version),l.options={deferUpdates:!1,useOnlyNativeEvents:!1,foreachHidesDestroyed:!1},l.utils=function(){var t=Object.prototype.hasOwnProperty;function o(e,i){for(var n in e)t.call(e,n)&&i(n,e[n])}function u(e,i){if(i)for(var n in i)t.call(i,n)&&(e[n]=i[n]);return e}function c(e,t){return e.__proto__=t,e}var d={__proto__:[]}instanceof Array,h={},p={};h[s&&/Firefox\/2/i.test(s.userAgent)?“KeyboardEvent”:“UIEvents”]=[“keyup”,“keydown”,“keypress”],h.MouseEvents=[“click”,“dblclick”,“mousedown”,“mouseup”,“mousemove”,“mouseover”,“mouseout”,“mouseenter”,“mouseleave”],o(h,(function(e,t){if(t.length)for(var i=0,n=t.length;i<n;i++)p[t[i]]=e}));var f,m={propertychange:!0},g=n&&function(){for(var t=3,i=n.createElement(“div”),s=i.getElementsByTagName(“i”);i.innerHTML=“\x3c!--[if gt IE “+ ++t+“]><i></i><![endif]--\x3e”,s[0];);return t>4?t:e}(),v=6===g,y=7===g,b=/\S+/g;function _(e,t,i,n){var s=e[t].match(b)||[];l.utils.arrayForEach(i.match(b),(function(e){l.utils.addOrRemoveItem(s,e,n)})),e[t]=s.join(” “)}return{fieldsIncludedWithJsonPost:[“authenticity_token”,/^__RequestVerificationToken(_.*)?$/],arrayForEach:function(e,t,i){for(var n=0,s=e.length;n<s;n++)t.call(i,e[n],n,e)},arrayIndexOf:“function”==typeof Array.prototype.indexOf?function(e,t){return Array.prototype.indexOf.call(e,t)}:function(e,t){for(var i=0,n=e.length;i<n;i++)if(e[i]===t)return i;return-1},arrayFirst:function(t,i,n){for(var s=0,r=t.length;s<r;s++)if(i.call(n,t[s],s,t))return t[s];return e},arrayRemoveItem:function(e,t){var i=l.utils.arrayIndexOf(e,t);i>0?e.splice(i,1):0===i&&e.shift()},arrayGetDistinctValues:function(e){var t=[];return e&&l.utils.arrayForEach(e,(function(e){l.utils.arrayIndexOf(t,e)<0&&t.push(e)})),t},arrayMap:function(e,t,i){var n=[];if(e)for(var s=0,r=e.length;s<r;s++)n.push(t.call(i,e[s],s));return n},arrayFilter:function(e,t,i){var n=[];if(e)for(var s=0,r=e.length;s<r;s++)t.call(i,e[s],s)&&n.push(e[s]);return n},arrayPushAll:function(e,t){if(t instanceof Array)e.push.apply(e,t);else for(var i=0,n=t.length;i<n;i++)e.push(t[i]);return e},addOrRemoveItem:function(e,t,i){var n=l.utils.arrayIndexOf(l.utils.peekObservable(e),t);n<0?i&&e.push(t):i||e.splice(n,1)},canSetPrototype:d,extend:u,setPrototypeOf:c,setPrototypeOfOrExtend:d?c:u,objectForEach:o,objectMap:function(e,i,n){if(!e)return e;var s={};for(var r in e)t.call(e,r)&&(s[r]=i.call(n,e[r],r,e));return s},emptyDomNode:function(e){for(;e.firstChild;)l.removeNode(e.firstChild)},moveCleanedNodesToContainerElement:function(e){for(var t=l.utils.makeArray(e),i=(t[0]&&t[0].ownerDocument||n).createElement(“div”),s=0,r=t.length;s<r;s++)i.appendChild(l.cleanNode(t[s]));return i},cloneNodes:function(e,t){for(var i=0,n=e.length,s=[];i<n;i++){var r=e[i].cloneNode(!0);s.push(t?l.cleanNode(r):r)}return s},setDomNodeChildren:function(e,t){if(l.utils.emptyDomNode(e),t)for(var i=0,n=t.length;i<n;i++)e.appendChild(t[i])},replaceDomNodes:function(e,t){var i=e.nodeType?[e]:e;if(i.length>0){for(var n=i[0],s=n.parentNode,r=0,a=t.length;r<a;r++)s.insertBefore(t[r],n);for(r=0,a=i.length;r<a;r++)l.removeNode(i[r])}},fixUpContinuousNodeArray:function(e,t){if(e.length){for(t=8===t.nodeType&&t.parentNode||t;e.length&&e[0].parentNode!==t;)e.splice(0,1);for(;e.length>1&&e[e.length-1].parentNode!==t;)e.length--;if(e.length>1){var i=e[0],n=e[e.length-1];for(e.length=0;i!==n;)e.push(i),i=i.nextSibling;e.push(n)}}return e},setOptionNodeSelectionState:function(e,t){g<7?e.setAttribute(“selected”,t):e.selected=t},stringTrim:function(t){return null===t||t===e?“”:t.trim?t.trim():t.toString().replace(/^[\s\xa0]+|[\s\xa0]+$/g,“”)},stringStartsWith:function(e,t){return e=e||“”,!(t.length>e.length)&&e.substring(0,t.length)===t},domNodeIsContainedBy:function(e,t){if(e===t)return!0;if(11===e.nodeType)return!1;if(t.contains)return t.contains(1!==e.nodeType?e.parentNode:e);if(t.compareDocumentPosition)return 16==(16&t.compareDocumentPosition(e));for(;e&&e!=t;)e=e.parentNode;return!!e},domNodeIsAttachedToDocument:function(e){return l.utils.domNodeIsContainedBy(e,e.ownerDocument.documentElement)},anyDomNodeIsAttachedToDocument:function(e){return!!l.utils.arrayFirst(e,l.utils.domNodeIsAttachedToDocument)},tagNameLower:function(e){return e&&e.tagName&&e.tagName.toLowerCase()},catchFunctionErrors:function(e){return l.onError?function(){try{return e.apply(this,arguments)}catch(e){throw l.onError&&l.onError(e),e}}:e},setTimeout:function(e,t){return setTimeout(l.utils.catchFunctionErrors(e),t)},deferError:function(e){setTimeout((function(){throw l.onError&&l.onError(e),e}),0)},registerEventHandler:function(e,t,i){var n=l.utils.catchFunctionErrors(i),s=m[t];if(l.options.useOnlyNativeEvents||s||!r)if(s||“function”!=typeof e.addEventListener){if(void 0===e.attachEvent)thttp://requirejs.org/docs/errors.html#mismatch
    at makeError (require.min.js:16:53)
    at intakeDefines (require.min.js:77:132)
    at localRequire (require.min.js:97:1)
    at defContext.require (mixins.min.js:11:401)
    at requirejs (require.min.js:117:16)
    at <anonymous>:1:1
    at gtm.js?id=GTM-W5S7LZ6:387:414
    at b (gtm.js?id=GTM-W5S7LZ6:388:329)
    at Ge (gtm.js?id=GTM-W5S7LZ6:92:261)
    at e (gtm.js?id=GTM-W5S7LZ6:234:118)

After rolling back to 2.10.1 the error has gone.

[krzksz]

Hey @SerhiiMandrykin, thanks for reporting the issue! Would you be able to search the files and paste the full contents of the module that throws this error? It would be easier for me and @fredden to debug this.

[josepaitamala]

Hi, here having this Uncaught Error: Mismatched anonymous define() issue too , First it was complaining about this file I am using https://github.com/rstacruz/jquery.transit/blob/master/jquery.transit.js Which I am adding as a dep from requirejs-config.js deps: [ 'Module_Name/js/resource/transit/jquery.transit' ]

Then it complained about lib/web/jquery/jquery.storageapi.min.js too, which seems defined in vendor/magento/module-theme/view/base/requirejs-config.js So I really have no idea what's going on :-(

Btw using Magento 2.4.2-p1 and latest Magepack 2.11.0, the issue not happening when using Magepack 2.10.1

[fredden]

I've tracked this down to the changes introduced in #142 and minified content. The example I've found is from moment:

function(a,b){"use strict";"function"==typeof define&&define.amd?define(["moment"],b):"object"==typeof module&&module.exports?module.exports=b(require("moment")):b(a.moment)}(

Version 2.8.0 identifies this as an AMD module and names it, but version 2.11.0 doesn't identify this as an AMD module, so wraps it, leading to the duplicate define() call within the new wrapper. I'll open a pull request to fix this shortly.

[krzksz]

Nice, that's a downside of trying to parse code with regular expressions 😄 That said, the more corner cases we find, the more tests we'll have and we should be safer in the future.

[fredden]

the more tests we'll have and we should be safer in the future.

Yes, I've written the test first this time. :)