javascriptのエラーについて

Question

shopifyをDawnというテーマを元にカスタマイズしています。
カートに追加というボタンが動かないので、調べた所

Cannot read properties of null (reading 'setActiveElement')at HTMLElement.onSubmitHandler

というエラーが出ました。

この、「nullのプロパティを読み取ることができない」というのと、()にある「setActiveElementを読み取る」というのはどういうことなのでしょうか？
教えていただけると幸いです。

下記に、ファイル全体のコードを載せました。
ちなみにエラーと表示されているのは、onSubmitHandler(evt) のthis.cartNotification.setActiveElement(document.activeElement);
です。

if (!customElements.get('product-form')) {
  customElements.define('product-form', class ProductForm extends HTMLElement {
    constructor() {
      super();

      this.form = this.querySelector('form');
      this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
      this.cartNotification = document.querySelector('cart-notification');
    }

    onSubmitHandler(evt) {
      evt.preventDefault();
      const submitButton = this.querySelector('[type="submit"]');
      if (submitButton.classList.contains('loading')) return; 

      this.handleErrorMessage();
      this.cartNotification.setActiveElement(document.activeElement);

      submitButton.setAttribute('aria-disabled', true);
      submitButton.classList.add('loading');

      const config = fetchConfig('javascript');
      config.headers['X-Requested-With'] = 'XMLHttpRequest';
      config.body = JSON.stringify({
        ...JSON.parse(serializeForm(this.form)),
        sections: this.cartNotification.getSectionsToRender().map((section) => section.id),
        sections_url: window.location.pathname
      });

      fetch(`${routes.cart_add_url}`, config)
        .then((response) => response.json())
        .then((response) => {
          if (response.status) {
            this.handleErrorMessage(response.description);
            return;
          }

          this.cartNotification.renderContents(response);
        })
        .catch((e) => {
          console.error(e);
        })
        .finally(() => {
          submitButton.classList.remove('loading');
          submitButton.removeAttribute('aria-disabled');
        });
    }

    handleErrorMessage(errorMessage = false) {
      this.errorMessageWrapper = this.errorMessageWrapper || this.querySelector('.product-form__error-message-wrapper');
      this.errorMessage = this.errorMessage || this.errorMessageWrapper.querySelector('.product-form__error-message');

      this.errorMessageWrapper.toggleAttribute('hidden', !errorMessage);

      if (errorMessage) {
        this.errorMessage.textContent = errorMessage;
      }
    }
  });
}

Answer 1

this.cartNotification.setActiveElement(document.activeElement);

この行の this.cartNotification が null なので、setActiveElement というプロパティが読めないよ、ということです。

this.cartNotification = document.querySelector('cart-notification');

ここで document.querySelector() が null を返しているのでしょうね。'.cart-notification' の間違い、というのが典型的です。

Comments

[zzziiii]

教えていだきありがとうございます。
'.cart-notification'で試してみましたが、うまくいきませんでした。(涙)
他にもファイルをコピペ等して差分がないか色々試しているのですが、エラー内容は変わらずです。
もう少し考えてみます。。。

[zzziiii]

int32_tさん
わかりやすく説明していただきありがとうございました。
結局どうしてnullが返されるかわからずでした.....。
document.querySelector()の中身を探したのですが、見当たらず.....。
この記述があるファイルの読み込みをやめると追加ボタンは動いたので、やめました。
shopifyはいろんなファイルが絡み合ってるぽいので原因を探すのには時間がかかると判断し、応急処置的な感じでとりあえずやめました...。