Context declaration returns error 'Property is incompatible with index signature.' in build

26 views Asked by At

In my react next.js project, using the following versions : "next": "^14.1.0", "react": "^18", I'm declaring a react context object DataContext like so:

// src/app/data/index.tsx
interface Actions {
  save: (data: Data) => Promise<boolean>,
  delete: (id: string) => Promise<boolean>,
}

export const DataContext = createContext<Actions | null>(null)

And this declaration is on the same page file where I use it as:

// src/app/data/index.tsx

// ...

export default function DataPage({ searchParams }) {

// ...

const [{save, delete}, { data: data }] = useData(searchParams)

const dataActions: Actions = {save, delete}

// ...

return (
    <>
      <DataContext.Provider value={dataActions}>

It executes normally upon running on dev but when I try to build using the command next build, and with the strict flag in tsconfig.json set as true, it returns only the following error:

Type error: Type 'OmitWithTag<typeof import("localPath"), "metadata" | ... 12 more ... | "generateViewport", "">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'DataContext' is incompatible with the index signature.
    Type 'Context<Actions | null>' is not assignable to type 'never'.

I've tried changing the declaration of the DataContext to define the type explicitly, but the same error pops up:

export const DataContext: Context<Actions> = createContext<Actions>({
  save: async (data: Data) => { return true },
  delete: async (id: string) => { return true },
})

And, of course, setting the strict flag to false doesn't return this error, but I'd like to be able to build the project with the flag activated.

I don't understand what could be wrong with declaring a context like that. My approach to the problem could be wrong, but I'm failing to see what exactly is happening.

0

There are 0 answers