Endless Error/Reload Cycle in App Scaffold

Answered

Posted Nov 05, 2021

I started with the app_scaffold repo and modified `src/templates/default.js` to render my simple list of hyperlinks. When I uploaded to our Zendesk instance, it rendered correctly, but lots of errors were thrown in the devtools console.

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode') at n.render (app.js:1)

To debug, I pulled out most of my code until my default.js file was virtually empty.

export default function () {
  console.log('default.js');
  var client = ZAFClient.init();
  return '';
}

This resulted in an endless cycle of the reading 'parentNode' error and default.js being reloaded (in a ~2 second cycle). If I comment out the ZAFClient line, the error (and reloading) goes away.

It seems clear that I've set this up incorrectly, but I'm having trouble fining much guidance on how to do it right. Any suggestions?

3 comments

Date

Cheryl Lane

Nov 05, 2021

Hi,

I've not used the scaffold myself, but have some knowledge of JS and the ZAF client. Taking a look over the app scaffold code, I think I can see where you might be running into issues.

In the base state of the scaffold, there are a number of JS files that build into the eventual JS that loads when you open the compiled app, these go javascripts/locations/ticket_sidebar.js (where "client" is already initiated) which calls /modules/app.js which then gets all the data (in this case, the user info) and then calls the default.js that you've modified.

If the only file you've modified in this is the default.js file, you're in a state where the ZAFClient is already set up and you're creating it again.

Arguably this scaffold isn't the most user friendly, but what you would do is modify default.js only with the html you want to display and modify the modules/app.js function init() to get data from the client instance and pass it to the default.js by adding it to this.states and then using it in the default.js file in the same way with the template string.

If you're processing anything that does not need the client, this can be done in default.js before the render or in the app.js and passed the same way.

Hope this helps,

Cheryl

Ryan Carpenter

Nov 05, 2021

That makes sense. Thanks. I guess I saw that ZAFClient was letting me render what I wanted, so I never looked closely enough at the other files.