【Vue/Nuxt】yarn build & yarn start時に起きたDOMExceptionを解決した話

Vue/NuxtのComponentの構造

Componentは以下のような構造にしていました。

<template>
  <div class="wrapper">
    <ScriptOnlyComponent />
    <section class="wrapper">
     省略
    </section>
  </div>
</template>

また、Java ScriptのみのComponentを用意していました。
GAをサブドメインごとにトラッキングしたくて、以下のようなComponentを用意していたわけです。

<template>
  <script>
    省略
  </script>
</template>

yarn devの時は見た目の表示は特に崩れませんでした。

yarn build & yarn start時にDOMExceptionが起きて表示が崩れた

しかし、yarn buildとyarn startで起動した時に以下のエラーが起きました。

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

toast-uiを使用していたのですが、入力したHTMLが表示されるはずが何も表示されないとか、ヘッダーが消えてフッターが2つ表示されるみたいな怪奇現象が起きていました。

DOMExceptionの解決方法

scriptタグのみのComponentが悪さをしていたらしく、以下のように空の<div>を追加すると怪奇現象が解消されていました。

<template>
  <div>
    <div></div>
    <script>
      省略
    </script>
  </div>
</template>

1つ1つComponentを潰してやっとバグの原因を見つけ出せたので骨が折れました…。