How can I handle ES modules?

[itsrcrowell]

We’re using a library that was built with the ES module approach, and I couldn’t get it integrated into the Breeze integration following the documentation. The only approach that works is using <script type="module">, but I would like to avoid it. Isn't it possible to integrate it via breeze_default.xml?

You can use it for testing: https://cdn.cnstrc.com/ui/autocomplete/1.27.1.js

[vovayatsyuk]

You can't merge this file togethether with other js code. Since it's a es module, it must be loaded using import.

You can write a wrapper that will load it:

<referenceBlock name="breeze.js">
    <arguments>
        <argument name="bundles" xsi:type="array">
            <item name="default" xsi:type="array">
                <item name="items" xsi:type="array">
                    <item name="autocomplete" xsi:type="array">
                        <item name="path" xsi:type="string">Swissup_Breeze/js/components/autocomplete-loader</item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>

define([], function () {
    'use strict';

    return async function (options) {
        const { default: autocomplete } = await import(
            'https://cdn.cnstrc.com/ui/autocomplete/1.27.1.js'
        );

        autocomplete(options);
    };
});

Usage:

require(['autocomplete'], function (fn) {
    fn({
        selector: '#search'
    });
});

[itsrcrowell]

Thank you <3