Error on Javascript component.render() (TypeError: Cannot read property 'remove' of undefined)

I’m running SKUID version 12.1.7 and API v1

Here’s the XML for a simple example page where this error occurs when trying to re-render the Queue component. This should reproduce the error:

                          {{Index}}         var params = arguments[0], $ = skuid.$; console.log(params); params.model.data.sort((a, b) => (a.Index > b.Index) ? 1 : -1); var params = arguments[0], $ = skuid.$; skuid.component.getById(‘sk-sOu-839’).render();                               ```

I’ve discovered what’s going on here. I believe this to be a bug.

If you keep the “Hide Header” option for the queue unchecked, the .render() works fine, however if you have “Hide Header” for the queue checked, you get the error.

Hey Mark, thank you for providing Skuid version, page version (V1) and page XML, that was very helpful for us to reproduce the issue. We can confirm that enabling/disabling “Hide Header” in the Queue component properties makes the difference here. I’ll inform the dev team about it. There is a workaround, you could hide the Queue header with CSS (and disable the option to “Hide Header” in the Queue component properties). That way, the header will be hidden and you won’t run into the error message. If you want to hide the header of all Queue components on the page, you only need this CSS:

.nx-queue-header {
    display:none;
}

In case you only want to hide the header of a specific Queue component, put the Queue component in a Wrapper component and add a CSS class to the Wrapper, e.g. “HideHeader”, then use the following CSS:


.HideHeader .nx-queue-header {
    display:none;
}

Note: We use a Wrapper component around the Queue component here, because if you assign the CSS class to the Queue component directly, it seems to affect only the Queue body, but not its header.

We hope that this is helpful for you!

Thanks Luzie!

i am running into roughly the same thing getting error:skuid__SharedRuntimeJS:2 TypeError: Cannot read property ‘render’ of undefined regardless of which component it is attached to. An action on model query fires before the components are rendered.  

If the component isn’t visible on the screen you’ll also get this error. Sometimes even you’ll need to give it more time than just running the code at the same time as it appears on the screen.

Because of this I’ve created a function called “waitForElement” that waits until an element is on the screen before running an action.

//&nbsp;skuid.custom.waitForElement(fparams,callback)<br>//&nbsp;wait&nbsp;for&nbsp;an&nbsp;element&nbsp;to&nbsp;be&nbsp;ready&nbsp;on&nbsp;the&nbsp;screen&nbsp;before&nbsp;performing&nbsp;the&nbsp;callback&nbsp;function<br>//&nbsp;fparams&nbsp;=&nbsp;{<br>//&nbsp;&nbsp;initEle:&nbsp;function&nbsp;to&nbsp;initialize&nbsp;the&nbsp;element&nbsp;/&nbsp;check&nbsp;if&nbsp;the&nbsp;element&nbsp;is&nbsp;initialized,<br>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;should&nbsp;return&nbsp;the&nbsp;initialized&nbsp;element.&nbsp;Takes&nbsp;context&nbsp;as&nbsp;a&nbsp;variable.<br>//&nbsp;&nbsp;context:&nbsp;passed&nbsp;context&nbsp;or&nbsp;defaults&nbsp;to&nbsp;window<br>//&nbsp;&nbsp;chunkTime:&nbsp;time&nbsp;between&nbsp;chunks,&nbsp;defaults&nbsp;to&nbsp;250<br>//&nbsp;}<br>skuid.custom.waitForElement&nbsp;=&nbsp;function&nbsp;(fparams,&nbsp;callback)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;fparams&nbsp;=&nbsp;fparams&nbsp;||&nbsp;{};<br>&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;initEle&nbsp;=&nbsp;fparams.initEle&nbsp;||&nbsp;undefined;<br>&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;element&nbsp;=&nbsp;fparams.element&nbsp;||&nbsp;undefined;<br>&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;context&nbsp;=&nbsp;fparams.context&nbsp;||&nbsp;window;<br>&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;chunkTime&nbsp;=&nbsp;fparams.chunkTime&nbsp;||&nbsp;250;<br>&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;doChunk&nbsp;()&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;ele;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(initEle&nbsp;===&nbsp;undefined&nbsp;&amp;&amp;&nbsp;element&nbsp;!==&nbsp;undefined)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ele&nbsp;=&nbsp;element;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(initEle&nbsp;!==&nbsp;undefined)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ele&nbsp;=&nbsp;initEle.call(context);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(typeof&nbsp;ele&nbsp;!==&nbsp;'undefined')&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;error&nbsp;=&nbsp;false;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback.call(context,&nbsp;ele);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;catch&nbsp;(err)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error&nbsp;=&nbsp;true;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('Still&nbsp;waiting&nbsp;for&nbsp;element..&nbsp;Error:&nbsp;${err}');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!error)&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('Wait&nbsp;for&nbsp;element&nbsp;complete.');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearInterval(ourInterval);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('Still&nbsp;waiting&nbsp;for&nbsp;element..');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Keep&nbsp;trying&nbsp;to&nbsp;get&nbsp;the&nbsp;element&nbsp;and&nbsp;perform&nbsp;the&nbsp;callback&nbsp;until&nbsp;there&nbsp;isn't&nbsp;an&nbsp;error<br>&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;ourInterval&nbsp;=&nbsp;setInterval(doChunk,&nbsp;chunkTime);
};

I would recommend only calling this function when the element is about to be on the screen, otherwise if you do it on let’s say page render but the element is hidden behind a tab it will just keep running the waitforelement code over and over until it gets to the tab, better to put it as an action on the tab in that instance.