Log in to AnswerLog in to Follow
2021-07-20 19-36-00
Thiago Ribeiro Freitas
231Views
8Comments
Solved
How to deal or remove "Cannot read property 'destroy' of null" ?
Question
Beginner
Reactive
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
0
0
13 May 2021
2021-03-18 21-03-15
Benjith Sam
 
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

See solution in context
RWALabSectionIndexFix.oml
1
0
13 May 2021

Thank you very much @Benjith Sam, works perfectly!

0
0
13 May 2021

Replying to Thiago R's comment on 13 May 2021 21:37:19

You're welcome, Thiago.

Glad to help you :)


Kind regards,

Benjith Sam

0
0
14 May 2021

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

1
0
13 May 2021

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

1
0
13 May 2021
2021-03-18 21-03-15
Benjith Sam
 
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
1
0
13 May 2021

Thank you very much @Benjith Sam, works perfectly!

0
0
13 May 2021

Replying to Thiago R's comment on 13 May 2021 21:37:19

You're welcome, Thiago.

Glad to help you :)


Kind regards,

Benjith Sam

0
0
14 May 2021

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

0
0
18 May 2021

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

0
0
22 May 2021

@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!

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