is not a functionを解決したい

Question

TypeError: this.cartNotification.setActiveElement is not a function
を解決したいです。

shopifyのDawnというテーマを元にレイアウトを変えたりしています。
商品ページで、カートに追加というボタンを動かしたいのですが、上記のエラーが出てしまいます。
このエラーはどういうことなのでしょうか？関数でないというのどういうことなのでしょうか？
教えて頂けますと幸いです。

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;
      }
    }
  });
}

Comments

[int32_t]

this.cartNotification が何なのか調べましょう。
エラーが出る直前に `console.log(this.cartNotification); console.log(this.cartNotification.constructor.name);` してみるとか。

Answer 1

document.querySelector('cart-notification')は正しいですか？ document.querySelector('.cart-notification')ではないですか？

もし、document.querySelector('cart-notification')で正しいのであれば、product-formと同様に独自タグをどこかで定義しており、その中でsetActiveElement メソッドを定義しているはずです。

定義が漏れている、依存関係が崩れている、などのことが起きていると思いますので、その部分を確認してみてください。

参考：
Custom elements

---

ソースコードを見つけたので追記

Dawnテーマのデモページのソースを見てきましたが、やはり独自タグを実装していて、そこで独自メソッドのsetActiveElementを定義しているようです。
このCDNを読み込み忘れている、あるいは読み込み順序を間違えている、などの原因の可能性が高いです。

class CartNotification extends HTMLElement{constructor(){super(),this.notification=document.getElementById("cart-notification"),this.header=document.querySelector("sticky-header"),this.onBodyClick=this.handleBodyClick.bind(this),this.notification.addEventListener("keyup",(t=>"Escape"===t.code&&this.close())),this.querySelectorAll('button[type="button"]').forEach((t=>t.addEventListener("click",this.close.bind(this))))}

/...

setActiveElement(t){this.activeElement=t}}
customElements.define("cart-notification",CartNotification);

https://cdn.shopify.com/s/files/1/0551/7626/5784/t/31/assets/cart-notification.js?v=1877081553624793631

Comments

[zzziiii]

丁寧な回答ありがとうございました！
CDNの読み込み順序を変えたら解決しました。
javascriptの記述や定義で何か間違えているor漏れがあるとずっと思い込んでいました。。。

[Lhankor_Mhy]

お役に立てたようで何よりです

Answer 2

コンストラクタの

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

この記述から、「this.cartNotification」はElementという種類のオブジェクトであるとわかりますね。

Element - MDN

で、ここには「setActiveElement」というメソッドが存在しないので、当然エラーになる、と。

Comments

[zzziiii]

回答ありがとうございます。
依存関係にある別ファイルがあるのですが、読み込む順がエラーの原因でした。
MDNの記事読んでみます！

Answer 3

TypeError: this.cartNotification.setActiveElement is not a function

this.cartNotification.setActiveElement は関数ではない！
とおっしゃってますんで、その記述で間違いないか、スペルミスしてないか、定義に間違いないか、見直してみては

Comments

[zzziiii]

回答ありがとうございます！
setActiveElementを定義してあるファイルがあるのですが、それを読み込ませる順番を変えたら解決しました。