vite报错Element is missing end tag,找不错位位置?vite报错Element is mis

vite报错Element is missing end tag,找不错位位置?

翻遍搜索引擎发现都是描述,寻找未闭合标签, 排除半天没有找到?

解决方案一: 提升vite到新版本

vite 本身是新一代构建工具还很年轻,出现错误情有可原, 在github 的issue中有人就提出了这个问题. 10793号issue

解决方案二

场景描述

本人本身是底层源码学习者, 特殊原因缺钱了, 去了正式的公司混日子去了. 之前一直是TS开发, 公司的项目因为人员职业年龄的问题都是JQuery时代的人, 因此选择了JS 作为开发语言.

本人在此种情况下,出现了Element is missing end tag,排查耗费半天.

原因分析

在vite 搭建的 JS项目中, 无意使用了 TS 的语法.

在某一行代码中,出现了这一段 (省略非必要代码,实际情况更为复杂)


const domInputRef = ref<HTMLElement>(null)

/** @type {Ref<HTMLElement>} */
const divDomRef = ref(null)

const filterLabel = (arr)=>{
    const _arr = new Array<{}>[];
    ....................
}

在这一段代码中,有3处错误,但是但是会出现Element is missing end tag错误, 并且 IDE 没有报错,没有报错.

原因

vite 报错是因为使用了TS的语法.
IDE 不报错, 检查下方的语法检查器类型.

例如我的IDE 默认的语法检查器是TS语法检查器,因此 IDE 没有对起语法报错调整为Vue语言检查器的JS版本.

为了约束类型在部分复杂类型情况下使用了JSDoc, 因为没有事先学习过JSDoc, 认为期能完全适应TS 语法,因此出现了错误,JSDoc 语法基本和TS一致,但是部分情况下,是不能相互使用的,使用时还需要认真检查.