Vue报错TypeError: Cannot read properties of null (reading ‘insertBefore‘)

在写Vue或者Nuxt项目时，我们可能会遇到以下报错

TypeError: Cannot read properties of null (reading ‘insertBefore’)

从报错上看，看不到太多的信息与提示，因此对于第一次遇到这种报错的人，往往不知道从何下手去修复报错。下面，我们根据实践经验总结了几条方法，帮助你排查报错原因：

1. 将v-if都改成v-show , 或者将所有v-if, v-else都改成v-show。有时候，之所以会报错，就是因为你使用了v-if 或者使用了v-if和v-else。

2. 如果你使用了katex的auto-render自动渲染页面的数学公式。那么报错很可能就是因为你设置的自动渲染功能，其实就是因为你完全按照官网的方式设置导致的[doge]。你可以尝试将katex换成mathjax来渲染数学公式，或者修改你katex的自动渲染设置，将自动渲染函数里面的document.body改为特定的渲染区域document.getElementById(Id)：

<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>

如果你渲染整个document.body，那么有可能把正常的代码也给渲染成数学公式了，结果就出现了insertBefore的报错。

3. 更换你的Dialog组件，在Nuxt 3报错TypeError: Cannot read properties of null (reading ‘shapeFlag‘)中，shapeFlag报错也是因为Dialog组件。不过，insertBefore报错的解决办法倒比shapeFlag容易些。如果你使用了服务端渲染，如Nuxt.js，那么insertBefore的报错可能源于你UI库使用的Dialog组件。以下以Nuxt.js为例说明，你可以尝试在Dialog组件上套一层ClientOnly

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

或者直接更换UI库。

总结一下，是否有感觉Vue或者Nuxt中有不少报错，是源于v-if和Dialog，具体原因可能涉及Vue或Nuxt的底层原理。

原文地址: Vue - TypeError: Cannot read properties of null (reading ‘insertBefore’)
更多各领域的原创文章：弦圈- 找到属于你的圈子,让知识无荒原
百科全书：弦圈百科
个人生活、经验分享：弦圈社区