Version

3.2.33

Reproduction link

sfc.vuejs.org/

Steps to reproduce

使用 @vue/cli@5.0.4" 创建的全新项目,然后添加以下代码:

What is expected?

正常情况下ts脚本应该被正常解析.

What is actually happening?

报错了: ERROR Failed to compile with 1 error 上午9:29:28

error in ./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true

Syntax Error: TypeError: Cannot read property 'content' of null

ERROR in ./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true (./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true) Module Error (from ./node_modules/vue-loader/dist/index.js): [@vue/compiler-sfc] Unexpected token (5:15)

D:\J-USER\desktop7\cli5_vue3\src\views\AboutView.vue 11 |
12 | const msg = ref("ABC"); 13 | const myObj = <{ [key: string]: string }>{ | ^ 14 | a: "123" 15 | } @ ./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true 1:0-250 1:0-250 1:251-490 1:251-490 @ ./src/views/AboutView.vue 2:0-71 3:0-66 3:0-66 6:49-55 @ ./src/router/index.ts 13:19-15:27 @ ./src/main.ts 3:0-30 5:30-36

ERROR in ./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true (./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true) Module build failed (from ./node_modules/vue-loader/dist/index.js): TypeError: Cannot read property 'content' of null at selectBlock (D:\J-USER\desktop7\cli5_vue3\node_modules\vue-loader\dist\select.js:23:45) at Object.loader (D:\J-USER\desktop7\cli5_vue3\node_modules\vue-loader\dist\index.js:67:41) @ ./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true 1:0-250 1:0-250 1:251-490 1:251-490 @ ./src/views/AboutView.vue 2:0-71 3:0-66 3:0-66 6:49-55 @ ./src/router/index.ts 13:19-15:27 @ ./src/main.ts 3:0-30 5:30-36

ERROR in ./src/views/AboutView.vue?vue&type=template&id=4cebd208&ts=true (./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/AboutView.vue?vue&type=template&id=4cebd208&ts=true) Module Error (from ./node_modules/vue-loader/dist/templateLoader.js): [@vue/compiler-sfc] Unexpected token (5:15)

D:\J-USER\desktop7\cli5_vue3\src\views\AboutView.vue 11 |
12 | const msg = ref("ABC"); 13 | const myObj = <{ [key: string]: string }>{ | ^ 14 | a: "123" 15 | } @ ./src/views/AboutView.vue?vue&type=template&id=4cebd208&ts=true 1:0-316 1:0-316 @ ./src/views/AboutView.vue 1:0-78 6:68-74 16:77-18:3 17:29-35 16:2-18:4 @ ./src/router/index.ts 13:19-15:27 @ ./src/main.ts 3:0-30 5:30-36

webpack compiled with 3 errors No issues found.

感觉ts被当做tsx了, <{ [key: string]: string }的<符号当做了一个html的tag.

但是在不使用语法糖时,如:

是正常工作的

我的问题在 Vue SFC Playground 运行竟然是正常的,我不清楚它和我的cli脚手架项目有什么不同

看错误信息像是没有将ts的语法剥离掉。 能再提供一个最小复现的仓库吗？

看看能不能将现在的仓库里复现的错误信息显示出来？

我使用@vue/cli@5.0.4" 创建全新的代码项目

我在App.vue添加了代码

https://github.com/jaskle/vue3_ts_err.git

我非常喜欢用setup语法糖,希望能帮我找到问题

如果在创建的时候选择了

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

在调用compiler-sfc中的compileScript时，会带上jsx插件 最后插件插件集是这些 这样就造成了，你想写ts，但是自动加上了jsx的情况，相当于自动变成了

<script setup lang="tsx">
import { ref } from 'vue'

const msg = ref('Hello World!')
const myObj = <{ [key: string]: string }>{
  a: "123"
}
msg.value = myObj.a;
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

因为这样写，在tsx中会报错 所以你的情况同样会遇到报错

我特意关掉了Use Babel alongside TypeScript,问题还是存在 但是我测试了一下 #5846 确实修复了这个问题,期待正式发布. 五一快乐