#[React] Cannot find namespace 'PaginatorContext'. ts(2503)

31 messages ยท Page 1 of 1 (latest)

harsh knoll
#

I have the following in a file called Paginator.ts. For some reason, I get the following error in VSCode for the return line inside the PaginatorProvider function. Your help will be much appreciated.

Error:
Cannot find namespace 'PaginatorContext'.ts(2503)

Code:

import { ReactNode, createContext, useContext } from 'react';

import { useLocalObservable } from 'mobx-react-lite';

import { PaginationConstants } from '../util/PaginationConstants';

type PaginatorStore = {
  hasNext: boolean;
  hasPrevious: boolean;
  label: string;
  pageSize: number;
  resultCount: number;
  start: number;
  stop: number;
  setPageSize: (pageSize: number) => void;
};

const PaginatorContext = createContext<PaginatorStore | null>(null);

/**
 * Creates a mobx store for the paginator component and returns a PaginatorContext.Provider component.
 * @returns a PaginatorContext.Provider component with the PaginatorStore as the value.
 */
export function PaginatorProvider({ children }: { children: ReactNode }): JSX.Element {
  
  const store: PaginatorStore = useLocalObservable(() => ({
    // Pagination is only shown if there are more results than
    // the page size. Therefore, defaulting hasNext to true
    // is valid.
    hasNext: true,
    hasPrevious: false,
    label: '',
    pageSize: PaginationConstants.DEFAULT_PAGE_SIZE,
    start: 0,
    stop: PaginationConstants.DEFAULT_PAGE_SIZE,
    resultCount: 0,
    setPageSize: (pageSize: number) => {
      console.log('Paginator setPageSize', pageSize);
      store.pageSize = pageSize;
    },
  }));

  return <PaginatorContext.Provider value={store}>{children}</PaginatorContext.Provider>;
}
drifting mango
#

Error coming from where

harsh knoll
#

@drifting mango The error is happening on the following line:

<PaginatorContext.Provider value={store}>{children}</PaginatorContext.Provider>

The error is shown in VSCode and persists even after restarting the TS server.

drifting mango
#

Doesn't seem to pop for me

harsh knoll
#

Here is a screenshot from VSCode. The interesting thing is, I have another file where I have essentially the same type of setup and there, TypeScript has no issue.

#

Oh boy ๐Ÿ˜ฆ

#

I just noticed the problem. ๐Ÿคฆ

drifting mango
#

I see

#

put a bracket around it

harsh knoll
#

The file is called Paginator.ts and not Paginator.tsx

drifting mango
#

What

#

I pretty sure the problem gets fixed if u put a bracket around the return value

#

Try that

#

Oh yes

#

And the .tsx

#

right...

harsh knoll
#

Yeah, because it is ts, TypeScript does not know JSX syntax

drifting mango
#

That i can't help u

#

ยฏ_(ใƒ„)_/ยฏ

harsh knoll
#

No worries, renaming the file will solve all of the problems ๐Ÿ™‚

drifting mango
#

๐Ÿ‘

harsh knoll
#

I imagine it is hard for TypeScript rto infer that the filename could be causing the problem. Ouch! And this is not the first time I was bitten by this. ๐Ÿ™‚

#

!resolved

drifting mango
#

The lsp handles differently

#

based on file type

harsh knoll
#

I think if I explicitly imported React, the problem would also go away. Something like:

import * as React from 'react';
#

Nope, that does not help unfortunately.

drifting mango
#

doubt so

harsh knoll
#

Paginator.ts -> Paginator.tsx === 'Problem resolved' ๐Ÿ™‚

#

Thanks for letting me talk through it with you.

drifting mango
#

If you have the extension in the status bar enabled you can see that the file type is different when u declare .ts vs .tsx.

If you are curious and understand further you can setup the logs for the language server, to see how the langauge server attach and behaves differently