I want to use useContext in React, TypeScript, but I can't resolve the error.

We are currently developing a web application using firebase.I use React and TypeScript.
Error writing context to keep user credentials.
It's my first time creating a front-end app by myself, and I'm having trouble solving it.

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

constuseAuthContext=()=>{
  returnuseContext (AuthContext);
};

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

Line 23 of authcontext.ts above
return<AuthContext.Provider value={value}>{children}</AuthContext.Provider>
The namespace 'AuthContext' could not be found in .ts(2503)" error.

I am using AuthContext generated by createContext, but I wonder if it is used incorrectly.

I've looked at various useContext samples of people online, but I haven't even considered what's wrong.

As for the content of the error, I feel like I wrote it where I can't write it, so I think it's a mediocre mistake in the first place, but could you please take a look at it?

Below is the package.I'm trying various things, so I might not need them now, but please forgive me.
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"
  }
}

reactjs typescript

2022-09-30 20:10

1 Answers

It was a common mistake that the file extension was .ts.The correct answer was .tsx.

2022-09-30 20:10

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656