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!

It seem the problem is in the configuration file. I was able to compile it on typescript playground. I cannot add the link here as it is too long. Where is you tsconfig.json located? — Marcelo
– Marcelo, Commented Sep 15, 2019 at 18:44

lukasgeiter · Accepted Answer · 2019-09-15 18:49:11Z

714

+25

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.

answered Sep 15, 2019 at 18:49

lukasgeiter

154k29 gold badges349 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dollique Over a year ago

Why does every Tutorial talking about <context.Provider use files like context/xyz.js instead of .jsx?

Rarblack Over a year ago

@Dollique Because typescript and javascript are not the same. Just to simplify javascript is not paying attention to the details but typescript does.

Dollique Over a year ago

@Rarblack I was asking about js instead of jsx. Many Tutorials use .js files, which is the reason why I used .ts instead of .tsx in my case.

Christoph Wolf Over a year ago

tbh that s a super unclear error message...

Kumar Shubham Over a year ago

You're a legend man!

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related