去年年底在编译项目时发现突然编译报错说找不到 JSX 命名空间，我就奇了怪了，昨天还编译的好好的项目今天就编译不过了，于是开始调查，先是回滚到前一天的 commit 发现是能够正常编译的，于是定位到同事提交的一个 commit 上面，但是这个 commit 里面就只有一行代码的变动和一个 yarn.lock 文件的提交，于是我就好奇为啥会影响到编译（刚开始由于急着发版本，只能先将这个 commit 回滚）后面回到宿舍后开始仔细调查原因，最后发现是由于提交的 yarn.lock 文件中将 vue 的版本更新上去了，然后我找回之前的版本发现能编译的最后版本是 vue 3.3.4，然后我当时逛了一圈 vue 的 issue 和 @vitejs/plugin-vue-jsx 的代码变动，还是没有任何头绪，于是我只能先将项目中的 vue 版本锁定在 3.3.4

yarn run v1.22.21
$ vue-tsc && vite build
src/pages/service/about/debug.tsx:18:58 - error TS2503: Cannot find namespace 'JSX'.

18 type DebugInfoItemType = { name: string; value: string | JSX.Element; layout?: 'row' | 'column' };
                                                            ~~~

src/pages/service/about/NetDetectionResult.tsx:24:10 - error TS2503: Cannot find namespace 'JSX'.

24     tag: JSX.Element;
            ~~~

src/pages/service/connect/CodeInputs.tsx:45:50 - error TS2503: Cannot find namespace 'JSX'.

45             const createInput = (index: number): JSX.Element => {
                                                    ~~~

src/pages/service/connect/CodeInputs.tsx:160:27 - error TS2503: Cannot find namespace 'JSX'.

160             const inputs: JSX.Element[] = inputValues.value.map((item, index) => createInput(index));
                              ~~~


Found 4 errors in 3 files.

Errors  Files
     1  src/pages/service/about/debug.tsx:18
     1  src/pages/service/about/NetDetectionResult.tsx:24
     2  src/pages/service/connect/CodeInputs.tsx:45
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

后续

今天偶然看 Vue 的文档，看到文档 #jsx-type-inference 中写到

从 Vue 3.4 开始，Vue 不再隐式注册全局 JSX 命名空间。…… 如果仍有代码依赖于全局存在的 JSX 命名空间，你可以在项目中通过显式导入或引用 vue/jsx 来保留 3.4 之前的全局行为，它注册了全局 JSX 命名空间。

解决方案就是在 global.d.ts 中添加如下引用

/*
 * @Author: Bin
 * @Date: 2023-05-19
 * @FilePath: /ui/src/global.d.ts
 */
…
import 'vue/jsx'
…