tdesign-vue-next icon indicating copy to clipboard operation
tdesign-vue-next copied to clipboard

nuxt3 下变量 global 替换成 globalThis 导致使用 global.value.xx 报错

Open zhangpaopao0609 opened this issue 3 years ago • 2 comments
trafficstars

tdesign-vue-next 版本

重现链接

https://codesandbox.io/s/nuxt3-tdesign-vue-next-tqoe07?file=/app.vue

重现步骤

使用框架和版本

  1. nuxt 3.0.0-rc.6
  2. tdesign-vue-next 0.19.1

如何复现

在 nuxt 中使用 pagination 组件,会直接报类似 Cannot read properties of undefined (reading 'jumpTo') 的错误

补充说明

相关 issue:

[Pagination] 组件在nuxt3中运行报错: https://github.com/Tencent/tdesign-vue-next/issues/988

问题定位 经过调试和查看 nuxt 源码发现, tdesign-vue-next 中的 global 会被 nuxt 替换成 globalThis

  • nuxt 源码 企业微信截图_3950d681-5c22-415e-bb33-5ea2079345cb

  • 调试

    • pagination 中调试代码 企业微信截图_c5ed5200-ae27-498e-90c0-e5975ed18c16

    • 编译后的 pagination 代码 企业微信截图_b7776cef-ceb5-480e-8852-3e9c8dc9968d

因此,global.value 的结果是 globalThis.value,而 globalThis 在 nuxt 中为全局对象,因此 globalThis.valueundefined,所以 global.value.xxx 都会出错:

计划如何解决 global 在 nuxt 中会被替换成 globalThis,有两种解决办法

  1. 给 nuxt 官方提 issue
  2. 我们自己改动,将所有的 global 变量进行替换

我个人更倾向于第二种,因为 global 在服务端确实是关键字来着

zhangpaopao0609 avatar Aug 11 '22 05:08 zhangpaopao0609

👋 @ardor-zhang,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

github-actions[bot] avatar Aug 11 '22 05:08 github-actions[bot]

第二种方式解决吧

PengYYYYY avatar Aug 11 '22 06:08 PengYYYYY

沟通后将 global 变量更改为 globalConfig

zhangpaopao0609 avatar Aug 12 '22 07:08 zhangpaopao0609

0.20.0版本已修复

PengYYYYY avatar Aug 15 '22 08:08 PengYYYYY