bigskysoftware/htmx

idiomorph error - undefined swapStyle

Closed this issue · 8 comments

gerbil commented

First of all hx-get does not work inside morphed content; In order to work around it - im doing htmx.ajax calls and thats working fine;
So when after every htmx.ajax call i can see this error in console:

htmx.js:2963  TypeError: Cannot read properties of undefined (reading 'swapStyle')
    at Object.isInlineSwap (idiomorph-ext.min.js:1:8230)
    at isInlineSwap (htmx.js:1396:23)
    at htmx.js:1438:16
    at forEach (htmx.js:740:9)
    at oobSwap (htmx.js:1431:7)
    at htmx.js:1822:11
    at forEach (htmx.js:740:9)
    at findAndSwapOobElements (htmx.js:1818:5)
    at swap (htmx.js:1890:7)
    at doSwap (htmx.js:4778:11)

Morph on page init:

hx-get="/resource/list/test" hx-swap="morph:innerHTML"

Inside /resource/list/test response there is links like this:

<a onclick="htmx.ajax('GET', '/resource/add/test', {target:'.tab-content', swap:'beforeend', swapStyle: 'innerHTML'});">New test</a>
MichaelWest22 commented

This looks like a typo bug in the current 0.3.0 release of idiomorph extension which has been fixed but a new version has yet to be released after this fix shipped.

bigskysoftware/idiomorph#32

I would recommend downloading the latest version from here https://github.com/bigskysoftware/idiomorph/tree/main/dist and hosting it locally to test if this resolves your issue.

gerbil commented

Thank you @MichaelWest22
Can you please clarify hx-get issue i got in morphed content?

gerbil commented

We can discuss that in discord i guess;

marcobeierer commented

@gerbil Could you resolve the issue you encountered with hx-get in morphed content? I'm having the same issue currently. Didn't dig to deep myself yet, but am just curious if you found something.

gerbil commented

I was not able to fix it, but as a wo - im using hx-ajax instead of hx-get in swapped data. Feels weird and awkward to me..

marcobeierer commented

@gerbil Thanks for the reply.

Did you use innerHTML swap strategy by any change? I discovered that the integration was broken and created a pull request for idiomorph to fix it. See bigskysoftware/idiomorph#65

This fixed the issue for me.

gerbil commented

Yes, innerHTML is a default as i know; So i used it definitely.

marcobeierer commented

For idiomorph the default when you define just morph should be outerHTML. innerHTML is the default for htmx.

  • 👀1