TypeError: Cannot read properties of undefined (reading 'swapStyle')

[aral]

I’m getting the following error when using idiomorph with htmx-ws:

htmx-1.js:1899 TypeError: Cannot read properties of undefined (reading 'swapStyle')
    at Object.isInlineSwap (htmx-idiomorph-0.3.js:863:27)
    at isInlineSwap (htmx-1.js:695:35)
    at htmx-1.js:733:30
    at forEach (htmx-1.js:369:21)
    at Object.oobSwap (htmx-1.js:726:17)
    at WebSocket.<anonymous> (htmx-ws-1.js:148:10)

The referenced point in htmx is:

        function isInlineSwap(swapStyle, target) {
            var extensions = getExtensions(target);
            for (var i = 0; i < extensions.length; i++) {
                var extension = extensions[i];
                try {
                    if (extension.isInlineSwap(swapStyle)) {
                        return true;
                    }
                } catch(e) {
                    logError(e);
                }
            }
            return swapStyle === "outerHTML";
        }

And the place in idiomorph is:

    htmx.defineExtension('morph', {
        isInlineSwap: function(swapStyle) {
            let config = createMorphConfig(swapStyle);
            return config.swapStyle === "outerHTML" || config.swapStyle == null;
        },
        handleSwap: function (swapStyle, target, fragment) {
            let config = createMorphConfig(swapStyle);
            if (config) {
                return Idiomorph.morph(target, fragment.children, config);
            }
        }
    });

If I can narrow it down further, I’ll update the issue.

[th3l0g4n]

I had the same issue after switching to idiomorph. Have a look at https://github.com/bigskysoftware/idiomorph/issues/24#issuecomment-1880159474. This fixed the error in my case.

[aral]

@th3l0g4n Hmm, but that’s the thing, this error triggers when hx-swap-oob='morph' is not added when hx-ext='morph' is specified on the page (because, say, you want to use a different swap style).

So, basically, it happens when the plugin is specified but not used in the page and another hx-swap-oob triggers. So this is a bug with this plugin. (If the hx-swap-oob is not morph, it should not affect things at all.)

[aral]

Note: I’ve now worked around this in Kitten by granularly adding the hx-ext='morph' attribute only to DOM elements where hx-swap-oob='morph' is specified.

In case it helps anyone else, here’s the relevant patch:

https://codeberg.org/kitten/app/commit/2dee2dd604eb29a237344a02894027c3832bf47a