Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
aral opened this issue Mar 13, 2024 · 4 comments
Open

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

aral opened this issue Mar 13, 2024 · 4 comments

Comments

@aral
Copy link

aral commented Mar 13, 2024

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
Copy link

I had the same issue after switching to idiomorph.
Have a look at #24 (comment).
This fixed the error in my case.

@aral
Copy link
Author

aral commented Jul 21, 2024

@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
Copy link
Author

aral commented Jul 21, 2024

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

@MichaelWest22
Copy link
Contributor

#32 This looks to be a typo that has already been fixed but the current release version 0.3.0 does not include this typo fix. We need a new release cut at some point

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants