

現在、firebaseを使ったwebアプリを開発中です。React、TypeScriptを使っています。  
ユーザーの認証情報を保持するためのcontextを書いていてエラーが発生しています。  
自力で一からフロントエンドのアプリを作るのは初めてで、解決できずに困っています。

authcontext.ts

[code]

    import { VFC, createContext, useContext, useState, ReactNode } from "react";
    
    interface userType {
      email: string;
      pass: string;
    }
    
    interface Props {
      children: ReactNode;
    }
    
    const initialUser: userType = { email: "", pass: "" };
    const AuthContext = createContext<userType>(initialUser);
    
    const useAuthContext = () => {
      return useContext(AuthContext);
    };
    
    const AuthProvider: VFC<Props> = (props) => {
      const { children } = props;
      const [user, setUser] = useState<userType>(initialUser);
      const value = { user };
      return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
    };
    
    export { useAuthContext, AuthProvider };
    
    
[/code]

上記のauthcontext.ts の２３行目  
`return <AuthContext.Provider
value={value}>{children}</AuthContext.Provider>;`  
のところで「名前空間 'AuthContext' が見つかりません。ts(2503)」とエラーになってしまいます。

createContextで生成したAuthContextを使っているのですが、使い方が間違っているのでしょうか。

ネットで色々な人のuseContextのサンプルを見てみたのですが、何がダメなのか検討もつかないでいます。

エラー内容的に、書けるわけないところに書いた的な雰囲気を感じるので、そもそも凡ミスなような気もするのですが、見ていただけませんでしょうか。

以下パッケージです。色々試しながらやっているので今は不要なのも入っているかもですが、ご容赦ください。  
package.json

[code]

    {
      "name": "app",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^12.1.2",
        "@testing-library/user-event": "^13.5.0",
        "@types/jest": "^27.4.0",
        "@types/node": "^16.11.17",
        "@types/react": "^17.0.38",
        "@types/react-dom": "^17.0.11",
        "firebase": "9.4.1",
        "firebase-tools": "^10.0.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-router-dom": "^6.2.1",
        "react-scripts": "5.0.0",
        "typescript": "^4.5.4",
        "web-vitals": "^2.1.2"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "devDependencies": {
        "@types/testing-library__jest-dom": "^5.14.2",
        "@types/testing-library__user-event": "^4.2.0",
        "autoprefixer": "^10.4.1",
        "postcss": "^8.4.5",
        "tailwindcss": "^3.0.9"
      }
    }
    
    
[/code]


CC BY-SA 4.0
2022-01-05T04:25:07.780
85491
2022-01-06T03:30:45.650
47142
question
reactjs typescript
React,TypeScriptでuseContextを使いたいがエラーを解決できない


ファイルの拡張子が.tsになっているという凡ミスでした。正しくは.tsxでした。


CC BY-SA 4.0
2022-01-06T03:30:45.650
85510
2022-01-06T03:30:45.650
47142
85491
answer