marbiano Github contribution chart
marbiano Github Stats
marbiano Most Used Languages

Activity

21 Sep 2022

Issue Comment

Marbiano

Gutenberg iframe editor error: [splide] A track/list element is missing.

Checks

  • [X] Not a duplicate.
  • [X] Not a question, feature request, or anything other than a bug report directly related to React Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.7.7

Description

Hi! When trying to use in Gutenberg (WordPress Block Editor) everything is fine until you open in their iframe editor. Gutenberg currently uses an iframe editor for tablet and mobile previews as well as their site builder.

The error in the console log is:

Error: [splide] A track/list element is missing.
    at assert (react-splide.esm.js:246:1)
    at collect (react-splide.esm.js:695:1)
    at Object.setup (react-splide.esm.js:657:1)
    at react-splide.esm.js:2441:1
    at forOwn (react-splide.esm.js:124:1)
    at _Splide2.mount (react-splide.esm.js:2438:1)
    at Splide2.componentDidMount (react-splide.esm.js:2661:1)
    at ir (react-dom.min.js?ver=17.0.1:9:65527)
    at Br (react-dom.min.js?ver=17.0.1:9:81796)
    at unstable_runWithPriority (react.min.js?ver=17.0.1:9:7431) 

Upon digging into the issue I was able to find that the function isHTMLElement returns false when it should return true.

Currently isHTMLElement function is:

function isHTMLElement(subject) {
  return subject instanceof HTMLElement;
} 

If that is updated to:

function isHTMLElement(subject) {
  return (
		typeof HTMLElement === "object" ? subject instanceof HTMLElement : //DOM2
		subject && typeof subject === "object" && subject !== null && subject.nodeType === 1 && typeof subject.nodeName==="string"
	);
} 

Then things work in the iframe editor. That code came from this stackoverflow: https://stackoverflow.com/questions/384286/how-do-you-check-if-a-javascript-object-is-a-dom-object

Thoughts on this? Would it be helpful if I added a pull request with this change, or perhaps you have another solution?

Reproduction Link

No response

Steps to Reproduce

  1. Create a simple block for gutenberg using any splide react example.
  2. Add the block in the editor.
  3. View the editor in tablet or mobile preview. ...

Expected Behaviour

When using splide in an iframe editor is should render correctly.

Forked On 21 Sep 2022 at 05:25:42

Marbiano

@NaotoshiFujita exactly, it does not. The update proposed by @kadencewp fixes it.

Commented On 21 Sep 2022 at 05:25:42