How to add AlpineJS to Sage

I recently started working with AlpineJs and wanted to integrate it into my sage project. I wasn’t really able to add that through the npm dependency so I enqueued it. It was working perfectly fine until I had to use the template tag in my code.

The HotReloading feature completely broke down.

        switch (left.nodeType) {
            case type.DOCUMENT_NODE:
               return this.compareNode(left.documentElement, right.documentElement);
            case type.ELEMENT_NODE:
               return this._compareAttributes(left.attributes, right.attributes) &&
                     this._compareNodeList(left.childNodes, right.childNodes);
            case type.TEXT_NODE:
               // fallthrough
            case type.CDATA_SECTION_NODE:
               // fallthrough
            case type.COMMENT_NODE:
               if (left.nodeType == type.COMMENT_NODE && !this._options.compareComments)
                  return true;
               vLeft = "" + left.nodeValue;
               vRight = "" + right.nodeValue;
               if (this._options.stripSpaces && left.nodeType !== type.CDATA_SECTION_NODE) {
                  vLeft = vLeft.trim();
                  vRight = vRight.trim();
               r = vLeft === vRight;
               return !r ? this._collector.collectFailure(left, right) : r;
               throw Error("Node type " + left.nodeType + " comparison is not implemented");

I saw this issue with Vue integration and people solving it here

But I don’t know a lot about webpack.

How should I add AlpineJS as a dependency?

run npm i alpinejs on the project directory and then add import 'alpinejs' to the main.js file in your theme.

Once ready run yarn build to compile everything


This topic was automatically closed after 42 days. New replies are no longer allowed.