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.