0

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

authcontext.ts

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 };

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

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

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

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

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

{
  "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"
  }
}

1 件の回答 1

2

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。