Vue - TypeError: Cannot read properties of null (reading 'insertBefore')

In Vue 3/Nuxt 3, one may occur the error

TypeError: Cannot read properties of null (reading 'insertBefore')

which has little information and is hard to solve. In the following, we summerize some tips that help you solve this error :

1. Change v-if to v-show , or change all v-if , v-else to v-show. Sometimes, the error appears because there are v-if or v-if, v-else pairs.

2. Change katex auto-render. The error may appear because you use katex auto-render. To solve this, you could either change katex to mathjax, or change document.body in the auto-render function to a specific area document.getElementById(Id) as follows :

<script>
    var node = document.getElementById(Id)
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(node, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>

If katex render all corresponding symbols in document.body, it may also influence some normal part. So you need to restrict it to a specific area.

3. Change your dialog component. If you are using SSR, like Nuxt.js, the error may occur due to your dialog component in the UI library. You could either try to wrap the dialog with ClientOnly

<ClientOnly>
    <Dialog>
    </Dialog>
</ClientOnly>

or try to use another UI library.