Vue TSX 报 Expected from
Vue TSX 的 import type 报 Expected from,检查 Vue 虚拟脚本是否被 Oxc 当成 JS。核对混合 React 插件、开发转换与 Vite 8.3.4 修复。
Vue 组件里的 import type { Props } from './types' 明明是合法 TypeScript,开发服务器却报 [vite:oxc] Expected from but found {。如果错误文件名带有 ?vue&type=script&setup=true&lang.tsx,且项目同时使用 Vue 插件与 Oxc 路线的 React 插件,应检查这段虚拟模块是不是被按 JavaScript 解析了。
已确认的一组环境是 Vite 8.3.2、@vitejs/plugin-vue 5.2.4、@vitejs/plugin-react 6.1.1。正式 Vite 8.3.4 包含相应修复。这里的条件是混合插件下的开发转换,不能把所有 Vue TypeScript 语法错误都归入这一版本问题。
文件名中的 lang.tsx 也是判断依据
Vue 插件生成的脚本模块可能使用这样的标识:
App.vue?vue&type=script&setup=true&lang.tsx
它不是磁盘上的独立 .tsx 文件。React 的 JSX refresh 过滤条件可能匹配末尾的 .tsx,而受影响的 Vite Oxc 路径又把该模块的解析语言强制设为 js。于是 import type、类型注解和 as 等 TypeScript 语法在下一次解析时失败。
先核对错误中的实际模块标识、插件组合和版本,并查看进入失败转换步骤的代码。若生成代码已经丢了括号,或错误来自普通 .tsx 文件,就不满足这组条件。单纯看到 vite:oxc 前缀,也不能证明就是同一个问题。
还应分别比较开发与生产路径。受影响组合可能是开发转换失败,而 vite build 正常;lang="ts" 的 Vue 脚本和实际 .tsx 文件也可能正常。这些对照可以缩小范围,不应被改写成“整个项目的 TypeScript 都不能用”。
修复语言选择,保留合法的类型声明
项目兼容时,按现有依赖管理方式更新到包含修复的 Vite 8.3.4,核对锁文件和实际启动的 Vite,保留原来的 Vue、React 插件组合。由上层框架管理 Vite 时,先检查那个框架允许的版本范围,不直接强制覆盖其整套编译依赖。
修复后的判断同时检查完整模块标识与去掉查询参数后的路径,避免把已经表达 TypeScript 语言的虚拟模块改成 js。因此处理目标是转换链中的语言选择,而不是删除源代码里合法的 import type。
将所有 TSX 组件改成普通 JS、移除类型检查,或者给每个文件额外插入一遍 esbuild 转换,都可能影响 JSX、source map 和插件顺序。需要临时切换 React 插件路线时,也应按项目支持的组合评估;不能把某个混合项目能运行,推广为任意插件版本都可以互换。
用原来的混合组件验收
重新启动审定依赖下的开发服务器,打开原来失败的 Vue TSX 组件,检查类型导入不再被当成 JS 语法拒绝,React 内容能正常渲染和更新。再沿原生产构建流程验收,确认没有因开发修复破坏正式产物。
保留“Vue 虚拟脚本、lang.tsx、React Oxc 插件”这一组合。只检查另一个普通 TS 文件,或只看到服务器 ready,都没有覆盖原故障。若新版本仍失败,记录实际模块标识、转换后的代码和插件顺序,再查其他语法或插件问题。


