为何.tsx文件中的graphql模板字符串引发Vite内部服务器错误？

环境与场景 #

• 使用版本：vite@5.2.0、react@18.2.0、react-relay@16.2.0
• 操作：按照Relay官方教程开发，在HelloWorld.tsx文件中通过graphql模板字符串定义查询语句

报错详情 #

触发Vite内部服务器错误，报错信息如下：

[vite] Internal server error: /.../src/GraphQLHelloWorld/HelloWorld.tsx: Unexpected token, expected "from" (4:12)

报错指向导入Relay生成类型的语句，且：

• 删除graphql模板代码后错误消失，但仅注释该代码无法解决问题
• 改用不带SWC的react-ts模板重新初始化Vite项目后，错误完全消失

原因分析 #

Vite的react-swc-ts模板默认采用SWC作为编译工具，当前SWC对Relay的graphql模板字符串存在兼容性问题，导致编译时无法正确解析关联的类型导入语句，进而触发语法错误。

解决方案 #

方案1：切换到无SWC的react-ts模板 #

直接使用不带SWC的react-ts模板重新初始化项目，即可正常按Relay教程开发：

npm create vite@latest my-relay-app -- --template react-ts

方案2：在现有react-swc-ts项目中改用Babel处理Relay #

1. 安装依赖：

npm install --save-dev @babel/plugin-transform-react-jsx @babel/preset-typescript babel-plugin-relay

2. 项目根目录创建.babelrc配置文件：

{
  "presets": [
    "@babel/preset-typescript",
    ["@babel/preset-react", {"runtime": "automatic"}]
  ],
  "plugins": ["relay"]
}

3. 修改vite.config.ts，禁用SWC并启用Babel：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react({ babel: { plugins: ['relay'] } })],
});

内容的提问来源于stack exchange，提问作者T. Junghans