What is the state of art debugging technique for busted templates

Questions
1

If I have a broken gjs component eg:

export default class MyComponent extends Component {
    <template>
    {{this.does.not.exist}}
    </template>
}

What is the state-of-the-art technique for:

  1. Discovering which component is broken?
  2. Discovering which property is causing the rendering problem?

I don’t mind if it is awkward or requires making everything slow temporarily, but is there some way of figuring out where the broken pieces are coming from:

At the moment we get something like:

Uncaught SyntaxError: Unexpected token '<' (at about:srcdoc:35:5)

2

Generally, on the development server, Ember is pretty good about telling you what the issue is (some errors are in the build, some are in the browser console at runtime). In production builds, things may fail more silently. Occasionally I’ve ran into some strange stuff that breaks without errors, in which case I’ll comment out my entire component and add things back until they start breaking again.

This error is not super helpful, but I would venture to guess that you don’t have ember-template-imports setup correctly? GitHub - ember-cli/ember-template-imports: Template import support in Ember!

RE: 'Which property is causing the rendering problem" - nested properties do not short-circuit in templates like they do in regular JS. The code you provided is essentially equivalent to: {{ this.does?.not?.exist}} which may resolve to undefined which is omitted from the template entirely.

3

Uncaught SyntaxError: Unexpected token '<' (at about:srcdoc:35:5)

make sure the file extension is gjs or gts <3