Glimmer-site-header.gjs:144 getBoundingClientRect error only when custom plugin enabled

Development

AI-generated summary

A user reports a getBoundingClientRect error in the browser console related to glimmer-site-header.gjs, which only occurs when their custom plugin is enabled. The issue arises in Ember 6.6.0, and the error happens during header offset recalculations. The plugin uses connectors like discovery-list-area and below-site-header to add components but does not directly modify the header. Despite the presence of a .d-header element in the DOM, the error persists, suggesting the header element may be null at the time of the call. The user asks about conditions that could lead to this null access and whether using api.renderInOutlet instead of connectors might prevent the issue. pfaffman suggests switching to api.renderInOutlet as a more reliable and intuitive approach for plugin component rendering.

1

Hi,

On a recent Discourse (Ember 6.6.0), I’m getting this error in the browser console, but only when my custom plugin is enabled:

glimmer-site-header.gjs:144 Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at recalculateHeaderOffset (glimmer-site-header.gjs:144)
    at setupHeader (glimmer-site-header.gjs:212)
    ...

What I’ve done so far:

• With all custom plugins disabled → no error.
• With only my plugin enabled (on the default theme) → error appears.
• Searched the plugin for d-header, site-header, glimmer-site-header, getBoundingClientRect:
◦ The plugin never touches the header; it only adds components via connectors:
:black_small_square: discovery-list-area/…
:black_small_square: below-site-header/…
:black_small_square: below-main-outlet/…
• Tried defensively creating a stub .d-header element in the plugin initializer if none exists, but the error still occurs.
• On pages where the error fires, document.querySelector(‘.d-header’) returns an element.

Questions:

  1. Under what conditions can glimmer-site-header end up calling element.getBoundingClientRect() on null?
  2. Is there anything special about using the below-site-header connector or adding body classes that could interfere with the new header component?
  3. Is there a recommended way for plugins to safely coexist with glimmer-site-header so this null access can’t happen?

Any pointers or known issues around this would be very helpful.

2

I don’t know if this is your problem, but rather than connectors, you should now use api.renderInOutlet. I find that more intuitive and less fiddly.