React Context在Vite+SWC环境下编译失败求助

问题背景 #

将原有可运行的React Context状态存储代码移植到Vite+SWC环境，仅修改变量名，却出现语法解析错误。移除value属性后又提示找不到已声明的GameContext命名空间，切换到@vitejs/plugin-react问题依旧。

代码片段 #

GameContext.ts（问题文件） #

import { createContext, useState } from "react";
import { GameContextProviderProps } from "./PropTypes";

export interface IGameContext {
  completedWinds: number;
  setCompletedWinds: (newCompletedWinds: number) => void;
};

const GameContext = createContext<IGameContext>({
  completedWinds: 0,
  setCompletedWinds: () => { }
});

const GameContextProvider = ({ children }: GameContextProviderProps) => {
  const [completedWinds, setCompletedWinds] = useState(0);

  const initialContext: IGameContext = {
    completedWinds,
    setCompletedWinds,
  };

  return <GameContext.Provider value={ initialContext }> {children} < /GameContext.Provider>
};

export default GameContextProvider;

Vite配置文件（vite.config.ts） #

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

错误信息 #

4:58:25 pm [vite] Internal server error:
  × Expected '>', got 'value'
    ╭─[/Users/gg/Code/mahjong-points/src/GameContext.ts:73:1]
 73 │     setCompletedWinds,
 74 │   };
 75 │
 76 │   return <GameContext.Provider value={ initialContext }> { children } < /GameContext.Provider>
    ·                                ─────
 77 │ };
 78 │
 79 │ export default GameContextProvider;
    ╰────


Caused by:
    Syntax Error
  Plugin: vite:react-swc
  File: /Users/gg/Code/mahjong-points/src/GameContext.ts:73:1

移除value属性后出现的错误：

Cannot find namespace 'GameContext'

解决方法 #

• 修正文件后缀：将GameContext.ts重命名为GameContext.tsx。包含JSX语法的TypeScript文件必须使用.tsx后缀，SWC才能正确识别并解析JSX语法。
• 修复JSX标签空格：将返回语句中的< /GameContext.Provider>改为</GameContext.Provider>，去掉<和/之间的空格，避免解析器误判。
• 验证Props类型定义：确保GameContextProviderProps包含children属性，示例定义如下：

  import type { ReactNode } from 'react';
  
  export interface GameContextProviderProps {
    children: ReactNode;
  }
  

内容的提问来源于stack exchange，提问作者XeonFusion