How to deal or remove "Cannot read property 'destroy' of null" ?
Application Type
Reactive

I am currently using a section index widget on a screen, but when i click to this screen, this widget sometimes does not show up, so when I leave the screen this dialog shows up:

"Cannot read property 'destroy' of null"

Does anybody know how to remove this message or fix this problem?

The section index is located in the "Informacoes" page in the screenshot. When I click from the Home Page of the application to this "Informacoes" page, the section index works perfectly, but when I click from the "Acesso dos Servidores" page to the "Informacoes" page, the section index doesn't show up, so when I leave it again, the error occurs.

Screenshot2.png

mvp_badge
MVP
Solution

Hi Thiago,

I also had the same observation, and as per my analysis, it's something to do with the underlying defined JS code in the SectionIndex widget implementation. 

"Cannot read property 'destroy' of null" - This error has occurred because the underlying js implementation gets failed to initialize the global sectionIndex object. The same undefined object, is getting referred to the block's OnDestroy event handler flow, which resulted in an error. 

As a work-around, I would suggest you do the following.

Steps to Follow:

  • Define an OnInitalize event handler for the Informacoes screen
  • Introduce a JavaScript node with the OnInitialize event handler
  • Use the below JS snippet
var reactListDiv = document.querySelector('.list');

if (reactListDiv) {
    reactListDiv.remove();
}

See this sample screen: SectionIndexFixDemo

Refer to the attached .oml file


Hope this helps you!


Kind regards,

Benjith Sam

RWALabSectionIndexFix.oml

Thank you very much @Benjith Sam, works perfectly!

mvp_badge
MVP

You're welcome, Thiago.

Glad to help you :)


Kind regards,

Benjith Sam

Hello @Thiago R,

Are you by any chance also using the DropdownTags widget on your screen? If yes, then https://www.outsystems.com/forums/discussion/58444/outsystems-ui-droptdowntags-version-2-3-5-problems/ may help resolve your issue by using the correct version of the OS UI.

Regards,

AJ

No, I am only using sections and one section index in that screen

mvp_badge
MVP
Solution

Hi Thiago,

I also had the same observation, and as per my analysis, it's something to do with the underlying defined JS code in the SectionIndex widget implementation. 

"Cannot read property 'destroy' of null" - This error has occurred because the underlying js implementation gets failed to initialize the global sectionIndex object. The same undefined object, is getting referred to the block's OnDestroy event handler flow, which resulted in an error. 

As a work-around, I would suggest you do the following.

Steps to Follow:

  • Define an OnInitalize event handler for the Informacoes screen
  • Introduce a JavaScript node with the OnInitialize event handler
  • Use the below JS snippet
var reactListDiv = document.querySelector('.list');

if (reactListDiv) {
    reactListDiv.remove();
}

See this sample screen: SectionIndexFixDemo

Refer to the attached .oml file


Hope this helps you!


Kind regards,

Benjith Sam

RWALabSectionIndexFix.oml

Thank you very much @Benjith Sam, works perfectly!

mvp_badge
MVP

You're welcome, Thiago.

Glad to help you :)


Kind regards,

Benjith Sam

Hi Guys,

thanks for your insights, @Benjith Sam demos working, however I have a more complex situation :)

I'm using the Outsystems Template Screen "Product Catalog" and when you transition from this screen to your demo screen with the SectionIndex you still get the error (basically the sectionindex is not loaded at all and when you leave the screen you get the "Cannot read property 'destroy' of null" error). 

I was able to trace this down a bit further and when I remove the "List_Navigation" widget from th Product Catalog screen everything works fine again. Also when the ProductCatalog is empty (0 results) its working fine...

Any idea on this one?

---edit---

I tested a bit more and get the same issue (invisible and error when leaving page) by putting the sectionindex in a TabContentItems

mvp_badge
MVP

Hi Christoph,

Sorry for the late reply. 

Thank you for sharing your observation with us. After reproducing the mentioned scenario, I also encountered the same error message. As a workaround, I suggest a slight change in the JS code (which is defined in the OnInitialize handler flow) shared in my previous comment.

See this sample app

@Thiago R Please note this update.

JavaScript Snippet

var reactListDivs = document.querySelectorAll('.list');

if (reactListDivs) {
    reactListDivs.forEach(function(reactListDiv) {
         reactListDiv.remove();
    });
}

I hope this helps you!


Kind regards,

Benjith Sam

@Benjith Sam thank you a lot!

Somehow the issue disappeared by itself (maybe I added some other widget solving the bug)...

Keeping your script as a backup!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.