『DOMException: Failed to execute 'appendChild' on 'Node』エラー

ローカルでは動くのにAWS Amplifyでデプロイしたらエラー

昨日の夜に、このVuePressにコンバージョンを計測する用の実装を追加していたところ、👇のエラーが発生しました。

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

yarn docs:devをしたlocalhost環境では普通に動いていたのですが、環境が変わると何故か発生する、と。。 DevToolsのVueパネルで確認できればよかったのだけど、昨日の夜はGitHubが障害で祭りになってて、アレやコレや、で。(ってか、その前の日はAWSがトラブってたりして、最近、日本時間の夜中が何か不穏。。)

ah, #unicorn this time 🦄🦄🦄 #GitHub pic.twitter.com/1Cb8djxRpz

— ヨシダレッド (東京在住 40代 ソリューションエンジニア) (@red_yoshida) April 21, 2020

行った実装

結局、根本原因は分かってないのですが、入れたコードは👇のようなもの。URLパラメーターでクリックの際に送ったAlgoliaのクエリIDが無い場合はコンバージョントラッキング用のボタンを追加しないよ、と。

    <div class="conv" v-if="route.queryID">
      <p>👇Algoliaコンバージョン計測用</p>
      <p>
        <button
          @click="conversionInsights(route.queryID, [route.objectID])"
        >
          Conversion!!
        </button>
      </p>
    </div>

恐らく、何かの解釈でdiv要素を追加するはずなのにv-ifの条件がアレでappendChild出来ないじゃないか！っていうようなエラーなのかな？と理解しました。

ということで、安直にelse付けてやりゃイイか、、と思って入れたのが👇

    <div class="conv" v-else>
      <p>Algolia検索からの流入のみConversionボタン表示</p>
    </div>

GitHubの障害で、GitHubにpushしてからAWS Amplify Consoleがそれ拾ってデプロイしてくれるまでになかなかアレだったけど、エラー吐かずに動くようにはなりました。。

ちゃんとVue.jsのことを勉強するには、、

どのコンテンツが良いのですかね、、 場当たり的にググってコピペして、、みたいな開発にそろそろ疲れてきたっていうか、逆に効率悪いので普通にちゃんと勉強したい。。。笑

これからはじめるVue.js実践入門

posted with amachazl at 2020.04.22

山田 祥寛
SBクリエイティブ (2019-08-22)
売り上げランキング: 4,559

Amazon.co.jpで詳細を見る