支持 @vueuse/core@10

[ModyQyW]

新功能描述

支持 @vueuse/core@10

现状及问题

目前，uni-app 所使用的 vue 文件没有导出 TransitionGroup，导致 @vueuse/core@10 无法正常使用。一旦从 @vueuse/core@10 导入，就会报错。

尝试方案

可参考 vue-demi 的做法，增加导出。

https://github.com/vueuse/vue-demi/blob/main/lib/v2/index.mjs

补充信息

/

[Otto-J]

欢迎 PR，这是最近 v10 版本的限制，还是低版本也有相同的限制？

[ModyQyW]

这是最近 v10 版本的限制，还是低版本也有相同的限制？

是 v10 开始有的限制。

欢迎 PR

我初步看了一下，目前 vue 会被 alias 成 @dcloudio/uni-mp-vue/dist/vue.runtime.esm.js，我认为可以直接在 dev 分支 packages/uni-mp-vue/dist/vue.runtime.esm.js 文件内补充导出处理该问题。但我不太确定这个文件是否通过某种方式自动生成，如果是，直接修改文件不太妥当。请问可以告知我怎么做会更合适吗？谢谢！ @Otto-J

[Otto-J]

很高兴看到你的跟进，已经比较深入了，uni 有你可以做得更好。

我沟通了下，目前有一些比较 hack 的地方。目前看到的 uni-mp-vue 这块在 npm 上可以看 https://www.npmjs.com/package/@dcloudio/uni-mp-vue?activeTab=versions 版本发布情况，这部分源码在 https://github.com/fxy060608/vue-next 仓库下，这部分信息我先整理下，希望可以让这部分更加公开透明。

这部分的调整我也反馈给上游，现看下反馈再继续看这个问题。

[ModyQyW]

这部分的调整我也反馈给上游，现看下反馈再继续看这个问题。

期待反馈，感谢 🙏

[SoulLyoko]

可以临时写个vite插件给vueuse加个polyfill来解决:

// uni-polyfill.ts
import type { Plugin } from 'vite'

export function uniPolyfill(): Plugin {
  return {
    name: 'vite-plugin-uni-polyfill',
    transform(code, id) {
      if (!id.endsWith('@dcloudio/uni-mp-vue/dist/vue.runtime.esm.js'))
        return
      code += `
// polyfill for @vueuse/core
export const render = () => {}
export const TransitionGroup = {}
`
      return code
    },
  }
}

// vite.config.ts
import { uniPolyfill } from './plugins/uni-polyfill'

export default {
  plugins: [
    // ...
    uniPolyfill()
  ]
}

[ModyQyW]

有需要也可以参照我这篇文改一下 https://juejin.cn/post/7308899425149042739

[Otto-J]

最近升级了一些底层依赖，经过测试，h5 已支持 vueuse/core@10 的 createGlobalState

同样的思路，如果后续升级遇到相关以来找不到，未导出的情况，可以按照楼上两位的思路进行修改

[Otto-J]

如果有更广泛的测试需求，我可以开一个专门的讨论帖进行讨论。

[tianzhich]

又过去一段时间了，vueuse 已经有 11 的版本了，我认为 uniapp 官方应该解决一下这类问题。我记得上次用 vue-i18n 也报过一个类似的错误