Cannot find namespace 'ctx' error when creating Context with react - typescript

Question

I'm working on a project with react using typescript and I'm having a bad time figuring out why this error is happening, basically, I can't use any createContext examples that I found on the internet because of this. This one specifically I got from here: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet I'm trying to use the same that is showing in the Context section.

import * as React from "react";  export function createCtx<A>(defaultValue: A) { type UpdateType = React.Dispatch<React.SetStateAction<typeof defaultValue>>; const defaultUpdate: UpdateType = () => defaultValue; const ctx = React.createContext({     state: defaultValue,     update: defaultUpdate }); function Provider(props: React.PropsWithChildren<{}>) {     const [state, update] = React.useState(defaultValue);     return <ctx.Provider value={{ state, update }} {...props} />; } return [ctx, Provider] as [typeof ctx, typeof Provider]; } 

The issue is that everytime it says that there's this error Cannot find namespace ctx in the line:

        return <ctx.Provider value={{ state, update }} {...props} />; 

I'm still not able to figure out why, someone can see if I'm doing something wrong here? This is my tsconfig.json:

{ "compilerOptions": { "target": "es5", "lib": [   "dom",   "dom.iterable",   "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": false, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "preserve", "noImplicitAny": false, "strictNullChecks": false }, "include": [ "src" ] } 

Any help would be appreciated!

Answer 1

Your file extension is most likely .ts instead of .tsx.

Therefore TypeScript is interpreting <ctx.Provider as cast and tries to find a type Provider in the namespace ctx.

Answer 2

Please use tsx instead of ts it has some minute differences. tsx obviously allows the usage of jsx tags inside typescript.