【Vue3】`vite-plugin-uni`插件不兼容ESM：`Uni is not a function`

[aboutZZ]

环境

Vue3 + Vite + TypeScript

问题

当在package.json中指定type 为 module时，项目启动报错：TypeError: Uni is not a function

// vite.config.ts
import Uni from "@dcloudio/vite-plugin-uni"

export default defineConfig({
  plugins: [Uni()]
})

指定type为commonjs时正常。

[qinains]

升级unocss到0.59.0版本之后，报这个错

[StrivingRabbit]

升级unocss到0.59.0版本之后，报这个错

建议先使用 0.58.x

[jasper-ops]

目前@dcloudio/vite-plugin-uni采用的是commonJS的方式，而unocss0.59.x已经不支持commonjs了，仅仅支持ESM，所以目前挺尴尬的，当你用不支持cjs的库时，大概率就用不了了，不知道各位大佬有什么解决方案；

[jasper-ops]

找到一个新办法，使用动态导入来导入不支持cjs的模块，但是你的package.json的type还是要设置成commnjs，因为uniapp的插件还是cjs的

[zxhbloomer]

我的状况似乎不太一样，当在package.json中指定type 为 commnjs时，项目启动报错：TypeError: Uni is not a function。 跑不起来，我尝试了了下修改为：

plugins: [
      uni.default(), 
// 后面省略

这样就能够运行了，不知道对不对。 备注：已经修改vite.config.ts文件名为vite.config.mts

[jasper-ops]

我的状况似乎不太一样，当在package.json中指定type 为 commnjs时，项目启动报错：TypeError: Uni is not a function。 跑不起来，我尝试了了下修改为：

plugins: [
      uni.default(), 
// 后面省略

这样就能够运行了，不知道对不对。 备注：已经修改vite.config.ts文件名为vite.config.mts

不要改成mts呀，改成mts就会用esm去解析了，uni的插件不是esm的，它是cjs的

[zxhbloomer]

确实如此，需要cjs能够搞定。

[zxhbloomer]

升级后的部分问题： vite.config.ts修改成vite.config.mts：Uni is not a function。 vite.config.ts修改成vite.config.cjs：h5可以，app运行不起来 vite.config.mts改回ts：h5和app可以运行，但是页面中引用的uni_modules\uview-ui\components，都不能正确解析，

例如：在页面vue中使用<u-divider>，运行后，在chrome查看html代码，发现代码是<u-divider>，没有正确解析。easycom没有更改过。

[aboutZZ]

【Workaround】 在uniapp没修复此问题前，暂时先这样把

import Uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
    plugins: [
        Uni.default(),
        UnoCSS(),
        ...
    ],
    ...
})

[jasper-ops]

const UnoCss = await import('unocss/vite').then(i => i.default); 也许这样更好

---

发件人: Zhang Yi @.> 发送时间: 2024年5月13日 14:47 收件人: dcloudio/uni-app @.> 抄送: Jasper @.>; Comment @.> 主题: Re: [dcloudio/uni-app] 【Vue3】vite-plugin-uni插件不兼容ESM：Uni is not a function (Issue #4815)

【Workaround】 在uniapp没修复此问题前，暂时先这样把

import Uni from @.***/vite-plugin-uni'

export default defineConfig({ plugins: [ Uni.default(), UnoCSS(), ... ], ... })

― Reply to this email directly, view it on GitHubhttps://github.com/dcloudio/uni-app/issues/4815#issuecomment-2106775894, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AUIV3Y7HNFFDX7HSPSXZVQLZCBOXBAVCNFSM6AAAAABFVPKVGKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBWG43TKOBZGQ. You are receiving this because you commented.Message ID: @.***>

[shijunti19]

官方什么时候解决啊，全部改成esm啊

[bfc846958672]

由于unocss 不再提供commonjs版的代码，评论区也提供了解决方案，主要为三种

1. 降低unocss版本
2. 动态导入 （app端也可用）
3. 手动将unocss 源码编译成 commonjs 版，然后引入到项目中使用

[aboutZZ]

根源不在unocss，本质还是你不用esm啊

我提的问题是 vite-plugin-uni 不兼容 ESM，怎么评论区都是在说 unocss ？

[jasper-ops]

uniapp整套系统就不支持esm，处理不用esm你能咋办呢

---

发件人: Zhang Yi @.> 发送时间: 2024年9月2日 06:58 收件人: dcloudio/uni-app @.> 抄送: Jasper @.>; Comment @.> 主题: Re: [dcloudio/uni-app] 【Vue3】vite-plugin-uni插件不兼容ESM：Uni is not a function (Issue #4815)

根源不在unocss，本质还是你不用esm啊

我提的问题是 vite-plugin-uni 不兼容 ESM，怎么评论区都是在说 unocss ？

― Reply to this email directly, view it on GitHubhttps://github.com/dcloudio/uni-app/issues/4815#issuecomment-2323956255, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AUIV3Y7BIPAVKAQAESKQOBTZUQEAFAVCNFSM6AAAAABFVPKVGKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMRTHE2TMMRVGU. You are receiving this because you commented.Message ID: @.***>

[aboutZZ]

后面新项目转 taro 了。uniapp 再见，vue 再见

[bamf2077]

https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only

CJS 是因为当年 ECMA 不支持模块，社区搞出来的妥协产物，ESM 在 ES2015 中就规范化了，现在都 2024 年了，基本找不见几个只支持 CJS 的库了，新的库甚至清一色 ESM，直接就不支持 CJS，uni-app 是 Vue 生态的工具，Vue/Vite 全系都是 ESM 了，uni-app 什么时候能跟进？