使用TypeScript构建React Auth Context Provider时遇错误

错误根源拆解 #

1. 标签闭合语法错误：代码里的Provider闭合标签写错了——把</AuthContext.Provider>写成了</AuthContext>，这种语法混乱会让TS解析器误判代码结构，既触发了“Unterminated regular expression literal”这类语法错误，也导致TS无法正确识别AuthContext的合法使用，进而抛出“Cannot find namespace 'AuthContext'”。
2. 缺失核心依赖导入：createContext和ReactNode都需要从react包导入，TS环境下不导入会直接导致API或类型无法被识别。

修复后的完整代码 #

import { createContext, ReactNode } from 'react';

const AuthContext = createContext({});

type Props = {
    children: ReactNode;
};

export const AuthProvider = ({ children }: Props) => {
    return (
        <AuthContext.Provider>{children}</AuthContext.Provider>
    );
};

额外验证项 #

• 确保文件扩展名是.tsx（因为包含JSX语法），TS环境下.ts文件默认不支持JSX解析。
• 检查项目tsconfig.json配置，确保启用了JSX支持（比如设置"jsx": "react-jsx"或对应React版本的配置）。

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