Ant ASpin自定义 indicator 报错

一、问题

1.太多地方用到 Aspin了，还要使用h来自己，写style渲染。想着封装一下传值就可以。

2.没想到还搞出问题：线下报错，线上不报错。

3.报错具体如下：

bash 复制代码

chunk-QEPXSSG5.js?v=da510c8d:7137 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'type')
    at unmountComponent (chunk-QEPXSSG5.js?v=da510c8d:7137:18)
    at unmount (chunk-QEPXSSG5.js?v=da510c8d:7048:7)
    at unmountChildren (chunk-QEPXSSG5.js?v=da510c8d:7167:7)
    at unmount (chunk-QEPXSSG5.js?v=da510c8d:7068:9)
    at unmountComponent (chunk-QEPXSSG5.js?v=da510c8d:7147:7)
    at unmount (chunk-QEPXSSG5.js?v=da510c8d:7048:7)
    at unmountChildren (chunk-QEPXSSG5.js?v=da510c8d:7167:7)
    at unmount (chunk-QEPXSSG5.js?v=da510c8d:7076:9)
    at unmountChildren (chunk-QEPXSSG5.js?v=da510c8d:7167:7)
    at unmount (chunk-QEPXSSG5.js?v=da510c8d:7076:9)
Promise.then		
callAsyncFunc	@	useAsyncLoading.ts:17
await in callAsyncFunc		
handleCheck	@	OnlineInvoice.vue:256

4.报错的地方是 loading.value=false这行代码,大致意思是组件没有正常卸载。但是我也没有写啥呀。就很常见的逻辑：调接口前loading,调完接口后取消loading而已。

5.具体代码如下：

6.我推测的错误原因：

1)Asteps异步，还没有加载完。但是吧，Asteps完全就是一个样式，和逻辑没有啥关系

2)handleNext影响逻辑，去除，也没有用

3)DeepSeek问了一下，它说可能是CommonDrawer控制显示的isShowModal没有正确执行。试了一直显示也没有用

4)真是奇了怪呀，我啥也没写呀，看着没有问题呀。

二、原因及解决方法

1.问了一下大佬，然后说CommonLoading有问题，我也是蒙圈了。设想了十几种可能性，都是在错误的道路上无效努力。

2.具体代码如下：乍一看，好像没有毛病呀。但是吧，把他注释了还真不报错了。

html 复制代码

<template>
  <!-- 加载中 -->
  <ASpin :indicator="indicator"></ASpin>
</template>
<script lang="ts" setup>
import { Loading3QuartersOutlined } from '@ant-design/icons-vue'

const props = withDefaults(defineProps<{ fontSize?: number; svg?: any; color?: string; fontWeight?: string }>(), {
  fontSize: 12,
  color: '#B3B3B3',
  fontWeight: 'bold'
})

const indicator = computed(() => {
  const icon = props.svg ?? Loading3QuartersOutlined
  return h(icon, {
    style: {
      fontSize: `${props.fontSize}px`,
      fontWeight: props.fontWeight,
      color: props.color
    },
    spin: true
  })
})
</script>

3.搞不懂，commonLoading是基于ASpin写的，去看看官网怎么写的，结果去官网看了。总结就是直接赋值

4.那我不用computed直接赋值是不是也可以呢？试了一下，还真可以

javascript 复制代码

<template>
  <!-- 加载中 -->
  <ASpin :indicator="indicator"></ASpin>
</template>
<script lang="ts" setup>
import { Loading3QuartersOutlined } from '@ant-design/icons-vue'
const props = withDefaults(defineProps<{ fontSize?: number; svg?: any; color?: string; fontWeight?: string }>(), {
  fontSize: 12,
  color: '#B3B3B3',
  fontWeight: 'bold'
})

const indicator = ref()
function initIndicator() {
  const icon = props.svg ?? Loading3QuartersOutlined
  indicator.value = h(icon, {
    style: {
      fontSize: `${props.fontSize}px`,
      fontWeight: props.fontWeight,
      color: props.color
    },
    spin: true
  })
}
initIndicator()
</script>

但是我真的不了解呀，为啥用 computed就无法正常卸载。DeepSeek还让我自己写动画来着，然后并没有用。用computed必定会报错@~~@,看不懂

三、总结

遇到**报错组件没有正常卸载 unmountComponent，Cannot read properties of null (reading 'insertBefore')**时，定位到具体的代码，要着重看报错行包裹的代码！！！

不要像我一样，疏忽大意，只想着外面的代码有问题🤣

2.现确认自己的逻辑是否有问题

3.如果确认自己的逻辑没有问题。需要着重注意二次封装的第三方组件有没有问题。尝试注释排除法 找到具体的错误位置，再到官网找到具体的例子照着写。

4.不过我是真搞不懂为啥 computed会导致Aspin组件无法正常卸载。有大佬知道，欢迎评论，谢谢！

希望对你有帮助！

如有错误，欢迎指正！