Glimmer-site-header.gjs:144 getBoundingClientRect 오류가 커스텀 플러그인 활성화 시에만 발생

개발
1

안녕하세요,

최근 Discourse(Ember 6.6.0) 환경에서 브라우저 콘솔에 아래 에러가 발생하고 있습니다. 다만, 이는 제 커스텀 플러그인이 활성화된 상태에서만 나타납니다:

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)
    ...

지금까지 진행한 작업은 다음과 같습니다:

• 모든 커스텀 플러그인을 비활성화하면 → 에러가 발생하지 않습니다.
• 제 플러그인만 활성화한 상태(기본 테마 사용 시) → 에러가 발생합니다.
• 플러그인 내에서 d-header, site-header, glimmer-site-header, getBoundingClientRect를 검색해 보았으나:
◦ 해당 플러그인은 헤더를 직접 건드리지 않으며, 커넥터를 통해 컴포넌트만 추가합니다:
:black_small_square: discovery-list-area/…
:black_small_square: below-site-header/…
:black_small_square: below-main-outlet/…
• 헤더가 존재하지 않을 경우 플러그인 초기화 단계에서 .d-header 요소의 스텁을 방어적으로 생성해 보았지만, 에러는 여전히 발생합니다.
• 에러가 발생하는 페이지에서 document.querySelector(‘.d-header’)를 호출하면 요소를 반환합니다.

질문 사항:

  1. glimmer-site-header가 null에 대해 element.getBoundingClientRect()를 호출하게 되는 조건은 무엇인가요?
  2. below-site-header 커넥터 사용이나 body 클래스 추가가 새로운 헤더 컴포넌트와 충돌할 수 있는 특별한 이유가 있나요?
  3. 플러그인이 glimmer-site-header와 안전하게 공존하여 이러한 null 접근이 일어나지 않도록 하는 권장 방법이 있나요?

이와 관련된 힌트나 알려진 이슈에 대한 정보가 있다면 매우 도움이 될 것입니다.

2

이것이 당신의 문제인지 모르겠지만, 커넥터 대신 이제 api.renderInOutlet을 사용하는 것이 좋습니다. 개인적으로는 더 직관적이고 다루기 쉽다고 느낍니다.