Magento 2 – Using Alpinejs With RequireJS

After hearing the great talk of Willem in Reacticon, I had a plan to explore Alpinejs in a Magento site. I spent some time exploring his idea in a Magento 2 site without removing the requirejs trouble we have right now with the Luma and black theme in Magento 2.

However, I stumbled upon the below error when I try to use Alpinejs along with requirejs. The error is shown below:

require.js:166 Uncaught Error: Mismatched anonymous define() module: function(){"use strict";function e(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function t(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,i)}return n}function n(n){for(var i=1;iAlpine: [${t}] directive should only be added to <template> tags. See https://github.com/alpinejs/alpine#${t}):1!==e.content.childElementCount&&console.warn(Alpine: <template> tag with [${t}] encountered with multiple element roots. Make sure <template> only has a single child element.)}function o(e){return e.toLowerCase().replace(/-(\w)/g,(e,t)=>t.toUpperCase())}function a(e,t){var n;return function(){var i=this,r=arguments;clearTimeout(n),n=setTimeout(function(){n=null,e.apply(i,r)},t)}}function l(e,t,n={}){return"function"==typeof e?e.call(t):new Function(["$data",…Object.keys(n)],var __alpine_result; with($data) { __alpine_result = ${e} }; return __alpine_result)(t,…Object.values(n))}const c=/^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref|spread)\b/;function u(e){const t=m(e.name);return c.test(t)}function d(e,t,n){let i=Array.from(e.attributes).filter(u).map(f),r=i.filter(e=>"spread"===e.type)[0];if(r){let e=l(r.expression,t.$data);i=i.concat(Object.entries(e).map(([e,t])=>f({name:e,value:t})))}return n?i.filter(e=>e.type===n):function(e){let t=["bind","model","show","catch-all"];return e.sort((e,n)=>{let i=-1===t.indexOf(e.type)?"catch-all":e.type,r=-1===t.indexOf(n.type)?"catch-all":n.type;return t.indexOf(i)-t.indexOf(r)})}(i)}function f({name:e,value:t}){const n=m(e),i=n.match(c),r=n.match(/:([a-zA-Z0-9-:]+)/),s=n.match(/.[^.]]+(?=[^]]*$)/g)||[];return{type:i?i[1]:null,value:r?r[1]:null,modifiers:s.map(e=>e.replace(".","")),expression:t}}function m(e){return e.startsWith("@")?e.replace("@","x-on:"):e.startsWith(":")?e.replace(":","x-bind:"):e}function p(e,t=Boolean){return e.split(" ").filter(t)}const h="in",v="out";function b(e,t,n,i=!1){if(i)return t();if(e._x_transition&&e.__x_transition.type===h)return;const r=d(e,n,"transition"),s=d(e,n,"show")[0];if(s&&s.modifiers.includes("transition")){let n=s.modifiers;if(n.includes("out")&&!n.includes("in"))return t();const i=n.includes("in")&&n.includes("out");(function(e,t,n){const i={duration:g(t,"duration",150),origin:g(t,"origin","center"),first:{opacity:0,scale:g(t,"scale",95)},second:{opacity:1,scale:100}};x(e,t,n,()=>{},i,h)})(e,n=i?n.filter((e,t)=>t["enter","enter-start","enter-end"].includes(e.value))?function(e,t,n,i){let r=n=>"function"==typeof n?t.evaluateReturnExpression(e,n):n;const s=p(r((n.find(e=>"enter"===e.value)||{expression:""}).expression)),o=p(r((n.find(e=>"enter-start"===e.value)||{expression:""}).expression)),a=p(r((n.find(e=>"enter-end"===e.value)||{expression:""}).expression));(e,s,o,a,i,()=>{},h)}(e,n,r,t):t()}function y(e,t,n,i=!1){if(i)return t();if(e._x_transition&&e.__x_transition.type===v)return;const r=d(e,n,"transition"),s=d(e,n,"show")[0];if(s&&s.modifiers.includes("transition")){let n=s.modifiers;if(n.includes("in")&&!n.includes("out"))return t();const i=n.includes("in")&&n.includes("out");(function(e,t,n,i){const r={duration:n?g(t,"duration",150):g(t,"duration",150)/2,origin:g(t,"origin","center"),first:{opacity:1,scale:100},second:{opacity:0,scale:g(t,"scale",95)}};x(e,t,()=>{},i,r,v)})(e,n=i?n.filter((e,t)=>t>n.indexOf("out")):n,i,t)}else r.some(e=>["leave","leave-start","leave-end"].includes(e.value))?function(e,t,n,i){const r=p((n.find(e=>"leave"===e.value)||{expression:""}).expression),s=p((n.find(e=>"leave-start"===e.value)||{expression:""}).expression),o=p((n.find(e=>"leave-end"===e.value)||{expression:""}).expression);(e,r,s,o,()=>{},i,v)}(e,0,r,t):t()}function g(e,t,n){if(-1===e.indexOf(t))return n;const i=e[e.indexOf(t)+1];if(!i)return n;if("scale"===t&&!E(i))return n;if("duration"===t){let e=i.match(/([0-9]+)ms/);if(e)return e[1]}return"origin"===t&&["top","right","left","center","bottom"].includes(e[e.indexOf(t)+2])?[i,e[e.indexOf(t)+2]].join(" "):i}function x(e,t,n,i,r,s){e.__x_transition&&(cancelAnimationFrame(e.__x_transition.nextFrame),e.__x_transition.callback&&e.__x_transition.callback());const o=e.style.opacity,a=e.style.transform,l=e.style.transformOrigin,c=!t.includes("opacrequire.js:166)
at intakeDefines (require.js:1221)
at require.js:1408

This error indicates Alpinejs just simply wont work with Requirejs library. The define function of requirejs is now conflicting with the define function in Alpinejs. Please note, I tried to include Alpinejs in the bottom section of the page.

So the immediate solution came to my mind on this problem is, including the Alpinejs library before Magento setting up requirejs. If we check the page source of any Magento 2 site. We will see below requirejs initialization.

<!doctype html>
<html lang="en">
    <head >
        <script>
    var BASE_URL = 'http://magento2site.test/';
    var require = {
        "baseUrl": "http://magento2site.test/static/version1603447215/frontend/Mytheme/custom/en_US"
    };
</script>
....
</head>
....
</html>

We need to include Alpinejs library just above this script. In order to do that, you need to edit the phtml file corresponding to the above script in your theme. So we can do this:

File: `app/design/frontend/Mytheme/custom/page/js/require_js.phtml`

<script src="<?= $block->getViewFileUrl('Magento_Theme::js/lib/alpine.min.js') ?>"></script>
<script>
    var BASE_URL = '<?= $block->escapeUrl($block->getBaseUrl()) ?>';
    var require = {
        "baseUrl": "<?= $block->escapeUrl($block->getViewFileUrl('/')) ?>"
    };
</script>

Now after flushing the cache and reload the page again, you will see the Alpinejs is included at top of the page in the page source and errors are gone forever. Now Alpinejs is ready to do it’s job.

<html lang="en">
    <head >
        <script src="http://magento2site.test/static/version1603447215/frontend/Mytheme/Custom/en_US/Magento_Theme/js/lib/alpine.min.js"></script>
<script>
    var BASE_URL = 'http://magento2site.test/';
    var require = {
        "baseUrl": "http://magento2site.test/static/version1603447215/frontend/Mytheme/custom/en_US"
    };
</script>
....
</head>
....
</body>

Please note, we are loading the script synchronously here. Adding async attribute in the Alpinejs script tag will lead you to the conflict of RequireJS again. Unfortunately this is an inevitable issue. Fortunately, the size of Alpinejs is too small so that, it won’t be a huge performance killer.

It makes so much sense to create custom js components in using Alpinejs which make the coding much more simpler and fun. Get away from UiComponents and use such a cool library like AlpineJS makes much more sense to me.

If time allows, we can even try to replace existing requirejs functionalies with Alpinejs which will provide a huge performance improvement.

Kudos to my friend Willem for giving such an interesting idea. I will keep on exploring this in our next project

Related: low body temperature and covid, walleye fishing potholes reservoir, bill copeland sfwa speech, how to upgrade talismans hypixel skyblock, the wichitas apartments lawton, ok, buster murdaugh and stephen smith, the effects of technology on the accounting profession, endpoints news credibility, ucsd structural engineering ranking, upenn athletic director salary, subaru outback leather seat replacement, danganronpa custom sprite maker, celebrities that live in tucson, nbcuniversal glassdoor interview, billy redden eye condition,Related: kusd staff email login, mh17 pilot seen crawling, olympic weightlifting records by age, social security disability cdr short form, michael dempsey obituary, explain addendum concerning right to terminate due to lender’s appraisal, halimbawa ng alegorya, jango canning town, tortle barbarian background, naaa arbitration policy hail damage, how much does florida pay for iguanas, eric maurice sheryl lee ralph, red wings trade rumors 2022, where is frank somerville, deaths in national parks wiki,Related: sea palms membership rates, list of woodbridge nj police officers, oklahoma city golf and country club membership cost, east tyrone ira members, action verbs used in qualitative research objectives, stockbridge amphitheater events, spirit lead me where my trust is without borders verse, huis clos analyse existentialisme, lou walker senior center class schedule, houses for rent in clayton, nc under $1000, why did moses not bless simeon and issachar, carol leonnig wedding, cataract lake cabins the view, zeltron name generator, how much are the scottish crown jewels worth,Related: warren times obituaries, notice to terminate month to month lease pennsylvania, tlscontact submission and collection checklist, ulster county arrests july 2022, lockup sacramento county jail, black river az dispersed camping, david hunter campbell, houses for sale near budapest, hungary, elizabeth montgomery death photos, columbus water outage, burlington waterfront webcam, difference between hunting rifle and assault rifle, how old is carmelo anthony daughter, houndslake country club membership cost, bargain hunt contestants list,Related: nes classic 600 games list, how does topography affect economic development, coda shop myanmar, salisbury country club membership fees, who played jocko in american sniper, apple optical engineer interview, manila colored particles, ricky williams kids, countryside christian center pastor fired, planning and organising competency examples, steve bartelstein wife, fair trade approach, sbs river cottage australia recipes, palawa kani dictionary pdf, bushnell sportview 4×12,Related: medium cast where are they now, what is slifee on my paycheck, anna maria island parasailing accident, woodstock police arrests, civic literacy requirement valencia, when you don’t like someone but don’t know why, fireworks that pop on the ground, how to change font size on vizio tv, northglenn police activity today, fake buddies cartridges, scott goggles sponsorship, dr goosey houston eye associates, eric vetro vocal technique, how far is brightline from miami airport, marion country club membership cost,Related: grand valley state basketball roster, vicki sparks commentator age, ryanair mobile boarding pass multiple passengers, how old was nick cannon in drumline, brian sullivan cnbc demoted, quarter of civilization human design, types of beats in journalism, wayne county obituaries 2022, upcoming housing lotteries in ma 2022, microsoft teams show all participants while presenting, fun facts about the calusa tribe, funny things to say to someone in labor, unsolved missing persons georgia, piaggio avanti safety record, black book project for finance,

Rajeev K Tomy

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top