search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
45.98k stars 8.05k forks source link

<script setup lang="tsx"> 在热更新时抛出错误 #10681

Open guaijie opened 3 months ago

guaijie commented 3 months ago

Vue version

3.4.21

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-lsy8bk?file=src%2FApp.vue,src%2Fcomponents%2FHelloWorld.vue,src%2Fcomponents%2Ftypes.ts,package.json&terminal=dev

Steps to reproduce

  1. 定位到 components/types.ts 文件
  2. 打开控制台并清除所有日志
  3. 修改 components/types.ts 中的代码（例如移除 Props 中的 a）
  4. 保存
  5. 热更新失败，控制台打印错误信息
  6. 定位到 components/HelloWorld.vue 文件，随意修改代码保存，热更新成功

image

该问题只出现在 lang="tsx" 的情况，在保存代码进行热更新时抛出错误。

What is expected?

热更新不会抛出错误

What is actually happening?

热更新抛出错误

System Info

No response

Any additional comments?

No response

sodatea commented 3 months ago

Workaround: const props = defineProps<Props,>() https://stackoverflow.com/a/32697733/2302258

热更新出错是合理的，不过可能需要看一下为什么初次加载时没出错。

guaijie commented 3 months ago

Workaround: const props = defineProps<Props,>() https://stackoverflow.com/a/32697733/2302258

热更新出错是合理的，不过可能需要看一下为什么初次加载时没出错。

你给的链接中的情况和这里的情况并不一样，链接中提到的是在 tsx 中定义一个泛型时出现报错的原因和解决方法。 image 这里定义了一个泛型 T1. 但是在使用时是不会报错的: 

// 定义时需要通过 extends 或者 comma 的方式解决
const f = <T extends any>(a: T) => a
// 使用时，解析器能正确识别是标签还是泛型
const a = f<string>('1')
console.log('a:', a)

image 这是我在自己项目中随意定义的一个函数后调用该函数，并没有任何问题

所以这里热更新失败本身就有问题

sodatea commented 3 months ago

不好意思，是我看错了。我再仔细研究一下。

guaijie commented 3 months ago

不好意思，是我看错了。我再仔细研究一下。

还有一个问题，setup tsx 的方式封装组件，热更新会很慢（控制台没有输出热更新，或者很久才会输出热更新成功）。需要手动刷新浏览器，且重新加载的过程十分缓慢（就好像是所有缓存被清理，需要重新加载所有依赖的并缓存一样），大多需要重新启动项目才能正常使用 image