React Context 无法在 Vite 上编译

Question

我正在尝试为我的 React 项目实现一个小型上下文存储。我从以前的（工作）项目中复制了大部分代码并更改了变量名称 - 最大的区别是我更改为 Vite+SWC。

\n

这是代码。

\n

import { createContext, useState } from "react";\nimport { GameContextProviderProps } from "./PropTypes";\n\nexport interface IGameContext {\n  completedWinds: number;\n  setCompletedWinds: (newCompletedWinds: number) => void;\n};\n\nconst GameContext = createContext<IGameContext>({\n  completedWinds: 0,\n  setCompletedWinds: () => { }\n});\n\nconst GameContextProvider = ({ children }: GameContextProviderProps) => {\n  const [completedWinds, setCompletedWinds] = useState(0);\n\n  const initialContext: IGameContext = {\n    completedWinds,\n    setCompletedWinds,\n  };\n\n  return <GameContext.Provider value={ initialContext }> {children} < /GameContext.Provider>\n};\n\nexport default GameContextProvider;\n

\n

这是我的 vite 配置

\n

import { defineConfig } from \'vite\'\nimport react from \'@vitejs/plugin-react-swc\'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [react()],\n})\n

\n

这是错误

\n

4:58:25 pm [vite] Internal server error:\n  \xc3\x97 Expected \'>\', got \'value\'\n    \xe2\x95\xad\xe2\x94\x80[/Users/gg/Code/mahjong-points/src/GameContext.ts:73:1]\n 73 \xe2\x94\x82     setCompletedWinds,\n 74 \xe2\x94\x82   };\n 75 \xe2\x94\x82\n 76 \xe2\x94\x82   return <GameContext.Provider value={ initialContext }> { children } < /GameContext.Provider>\n    \xc2\xb7                                \xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\n 77 \xe2\x94\x82 };\n 78 \xe2\x94\x82\n 79 \xe2\x94\x82 export default GameContextProvider;\n    \xe2\x95\xb0\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\n\n\nCaused by:\n    Syntax Error\n  Plugin: vite:react-swc\n  File: /Users/gg/Code/mahjong-points/src/GameContext.ts:73:1\n

\n

删除 value 属性会产生错误Cannot find namespace \'GameContext\'- 但我只是在上面几行声明了它。我也尝试过，@vitejs/plugin-react但出现了同样的错误。

\n

Answer 1

您的代码可能应该位于.tsx文件中而不是.ts.