rcbyr / keen-slider

The HTML touch slider carousel with the most native feeling you will get.
https://keen-slider.io/
MIT License
4.67k stars 214 forks source link

Gutenberg Block: TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. #427

Open hsntareq opened 3 months ago

hsntareq commented 3 months ago

Initializing this inside Gutenberg Blocks of WordPress is causing this problem. Anyone have solution for this type of error?

image
collins-lagat commented 1 month ago

The problem actually isn't getComputeStyle but this line: https://github.com/rcbyr/keen-slider/blob/b7aea40a7cb16032a04ad8a2df2b1c846c5a4f7d/src/core/utils.ts#L66 The container property on the slider is actully null: https://github.com/rcbyr/keen-slider/blob/b7aea40a7cb16032a04ad8a2df2b1c846c5a4f7d/src/plugins/web/web.ts#L221

Checkout this thread on gutenberg https://github.com/WordPress/gutenberg/issues/53867

So according to this reply (https://github.com/WordPress/gutenberg/issues/53867#issuecomment-1767855854), you need to check the context of the element to see if it's an iframe or the main window.

A possible fix is this:

elements instanceof elements.ownerDocument.defaultView.HTMLElement