'Unrecoverable Syntax Error' Issue with Dynamic Visibilty Via Tabs Component


I am using a 'Tabs' Navigation component, named tabs1 for this example. My reasoning for using this component is to create the illusion of having different 'tabs' by showing/hiding elements based on the tabs1.selectedIndex. Let's define the number of pages as n, my reasoning for using this component is to avoid the usage of a Tabbed Containe that has an n number of the same table and an n number of duplicated components on each page. If each page has the same table and components, there is no need to duplicate the components and thereby the logic related to each component.

I thought of this 'clever' way to set the visibility of components using an array of booleans and accessing the array using the tabs1.selectedIndex. Let's define the given visibility array as [true, false, true], we can then use the tabs1.selectedIndex as the accessor to get the proper value of the tab we're on, like so: [true, false, true][tabs1.selectedIndex]. Putting this into the 'Hidden' attribute of a component as JavaScript would allow for the component to be shown/hidden pretty dynamically based on the tabs.selectedIndex value. But this is where the problem arises.

The Problem

Using this syntax throws an error for some reason in Retool. See the screenshot below for an example of that error. The error is an Unrecoverable syntax error (x% scanned), with x being an integer. The error appears at the FIRST closing square bracket, ], in the JavaScript code. From the example given, [true, false, true], it is the absolute last character of that passage that the error appears on. The integer, x in the error varies. In my testing, it has been 2%, 5%, and 12%.

The Questions

Although this technical does 'work' without any visible issues, I am wary of using this 'clever' trick due to that error, and instantiates a plethora of questions:

  • What unintended consequences could this error have on an application?
  • Could this lead to something showing as visible when it should be hidden?
  • Is there some way to prevent this error from occurring?
  • Why is the error there?
  • Is it a problem with Retool reacting to what 'appears' to be a 2D array?

If anyone has any insight into this error or could please provide a fix for this somehow, that would be greatly appreciated as it's a lot better than attempting to hide/show visibility based on .selectedLabel, which can get rather lengthy based on the number of 'tabs'.


I have recreated the issue in a sandbox application to replicate, display, and share the issue. See the attached file for the project I created that duplicates this issue. It can just as easily be replicated in any application by using the syntax explained above.

For further reference, I am on Self-Hosted Retool version 3.28.3. If you import the project and look at any of the components that have a variable visibility, you will see the error. The screenshot provided above was taken from the demo application and is of the image1 component. If you have any questions, please let me know, and I'll try to clarify.

Syntax Issue.json (10.4 KB)

1 Like

Hey @ryan_hurd! Thanks for the thorough write up. I do see this error on that (3.28) Retool version, but it doesn't reproduce on the current Cloud version. It also appears that wrapping the arrays in parenthesis removes the error on the current version.

The good news, there is a temporary resolution with the parenthesis. And, this is likely resolved for you without those, with an update to your Retool version. If you'd prefer to wait for the next stable release, then that should be around June 4th.

We haven't seen many instances of this error, but for further context it looks like it's coming from JSHint which we use.

Hopefully that helps answer a portion of the plethora of questions that this raised! Definitely let me know if you have any follow ups.

As a side note, here's my favorite cinematic reference to 'plethora', hope it brings a chuckle to your day.