Question 205347 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React Context Provider error with typescript

I’m trying to create an auth/session context for my application. However, I am facing some errors when I attempt to build the Provider component and pass the children as props.


const AuthContext = createContext({})

type Props = {
    children: ReactNode
}

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

The following errors are appearing:

Cannot find namespace ‘AuthContext’.ts(2503)

Unterminated regular expression literal.ts(1161)

I tried to write the code with more information to see if it was a type error, but it didn’t solve the problem. When I try to take the same code and change the extension from TSX to JS the errors disappear.

Tags:

2

Answers


  1. 0

    Change your file extension from .ts to .tsx

    Login or Signup to reply.
  2. 0

    For the first issue that you are facing:- Cannot find namespace ‘AuthContext’.ts

    Change your .ts file to .tsx
    And in your tsconfig.json file make sure that jsx option is set to react-jsx under compiler options as below:-

    "compilerOptions": {
    "jsx": "react-jsx"
...
}

    For your second issue:- unterminated expression

    Just close your <AuthContext.Provider> with </AuthContext.Provider>as below:-

    const AuthContext = createContext({})

type Props = {
    children: ReactNode
}

export const AuthProvider = ({children}: Props) => {
    return(
        <AuthContext.Provider>{children}</AuthContext.Provider>
    )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search