因为它更新比较快，它的有些插件可能考虑不是非常周到导致的问题

它会报一个类型错误

尝试升级 unocss 查看最新版本 npm info unocss versions

将 package.json 里的 unocss 升级到最新版本

然后 npm i

然后就没有报错了，到这里就结束了吗？不！

这个时候开启 服务器 npm run dev

它可能一只在转圈 也可能打开后，报 99+ 个错

以下这个插件

会把 <div visible> 转换成 <div visible=''>

由于它的判断范围出错了，它会把下面这个代码改掉

那么就需要去改一下这个插件

因为是从 unocss 引入的，所以要去 unocss 去搜索这个包名

packages 所有仓库都集中在一个统一的仓库去管理的地方，想要去看 transformerAttributifyJsx， 只需要看这个目录然后搜索

去到 src 去看它的源码

但是这是最新的版本 于是我们需要去 main 的 tag 里面去看版本，从这里点开去看 0.50.6

将代码拷贝下来 新建一个 transformer-attributify-jsx.ts 文件，这里去看看 @unocss/core 是否在 node_modules 里面有 为了保险起见，最好下载这个包 npm i -D @unocss/core@0.50.4，最新的 0.50.6 版本会有 TS 报错

把 uno.config.ts 里面的

transformerAttributifyJsx 删掉，从当前项目中引入

结果还是在转圈圈

于是我分别试了 0.50.5 0.50.4 将它们的 transformer-attributify-jsx.ts 进行对比发现好像是因为正则表达式的错误 unocss v0.50.6 transformer-attributify-jsx.ts 源码链接🔗

// v0.50.6/5 版 第 40 行
const elementRE = /(<\w[\w:\.$-]*\s)((?:'[^>]*?'|"[^>]*?"|`(?:[^>]|[\S])*?`|\{(?:[^>]|[\S])*?\}|[^>]*?)*)/g

// v0.50.4 版 第 40 行
const elementRE = /<([^>\s]*\s)((?:'.*?'|".*?"|`.*?`|\{.*?\}|[^>]*?)*)/g

于是我尝试 将 v0.50.4 的放进来，可以正常显示了，那么就说明就是这行代码导致的。但为了保险起见需要依据当前项目去写对应的正则。

经过测试发现有诸多的写法当前版本不支持，具体请看： unocss changelog、unocss issues

不使用正则使用 babel 的方法解决

npm i -D @babel/preset-typescript @unocss/transformer-attributify-jsx-babel

uno.config.ts 里面修改引入路径 import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx-babel'