Error "Type 'S' does not satisfy the constraint 'IValueMap'" with TypeScript 4.8 in mobx-react

[DanielSWolf]

Intended outcome:

mobx-react 6.3.1 compiles with TypeScript 4.8

Actual outcome:

When using mobx-react 6.3.1 in a project that uses TypeScript 4.8, I get the following compiler error:

node_modules/mobx-react/dist/inject.d.ts:5:63 - error TS2344: Type 'S' does not satisfy the constraint 'IValueMap'.

5 export declare function inject<S, P, I, C>(fn: IStoresToProps<S, P, I, C>): <T extends IReactComponent>(target: T) => T & IWrappedComponent<P>;

This error occurs because TypeScript 4.8 is stricter than previous versions regarding unconstrained type parameters (see the blog entry announcing TypeScript 4.8).

The fix is to change function inject<S, P, I, C> to function inject<S extends IValueMap, P extends IValueMap, I extends IValueMap, C extends IValueMap>.

How to reproduce the issue:

Use mobx-react 6.3.1 in any project that uses TypeScript 4.8.

Versions

[kubk]

Could you describe the necessity of using Inject over React Context? The second one is a stable alternative to inject: https://github.com/mobxjs/mobx/tree/main/packages/mobx-react#provider-and-inject

Note: usually there is no need anymore to use Provider / inject in new code bases; most of its features are now covered by React.createContext.

[DanielSWolf]

I'm not using Inject in any way. It just happens to be part of mobx-react/dist/inject.d.ts. So whenever I use mobx-react in a TypeScript 4.8 project, TypeScript tries to compile the types in this file and fails.

[kubk]

@DanielSWolf Ok, thank you, I'll test mobx-react with TS 4.8 and get back to you with results.

[Codex-]

Also running into this issue, I pulled the mobx repository and was able to reproduce it by bumping typescript and just running a build:

src/inject.ts:84:24 - error TS2344: Type 'S' does not satisfy the constraint 'IValueMap'.

84     fn: IStoresToProps<S, P, I, C>
                          ~

  src/inject.ts:83:24
    83 export function inject<S, P, I, C>(
                              ~
    This type parameter might need an `extends IValueMap` constraint.

If you follow the tsc suggestions it simply changes:

export function inject<S, P, I, C>(
    fn: IStoresToProps<S, P, I, C>
): <T extends IReactComponent>(target: T) => T & IWrappedComponent<P>

to

export function inject<
    S extends IValueMap,
    P extends IValueMap,
    I extends IValueMap,
    C extends IValueMap
>(
    fn: IStoresToProps<S, P, I, C>
): <T extends IReactComponent>(target: T) => T & IWrappedComponent<P>

After that, the build works as expected, although the suggested updates seems a bit odd, unsure what you're actually expecting here as a base constraint.

[ClaysonIO]

I'm finding the same issue when using typescript 4.6.4, 4.7.2, and 4.8.4. My short term solution is using skipLibCheck: true in tsconfig.json, to ignore the error.

[DanielSWolf]

This issue has been fixed in mobx-react 7.6.0 but not, as far as I can see, for mobx-react 6.x.

We're using version 6.x. Given that the README states that version 6.x is "actively maintained", is there a chance of a backport?

[kubk]

@DanielSWolf Yes, the fix was applied only for 7. Unfortunately the README is outdated. The sentence "There are currently two actively maintained versions of mobx-react:" refers to old versions v5 and v6: mobxjs/mobx-react@70544ba

This is how it looked like: https://github.com/mobxjs/mobx-react/blob/79a5dc1a2cdea88e8a213a4b4e16bb14e499631d/README.md

Currently we publish only 7 from the monorepo and don't have any active branch or project related to version 6. Possible solutions for you are patch-package or updating your major version of mobx-react. Hope it helps.

[DanielSWolf]

@kubk Thanks for the clarification!

[kubk]

@DanielSWolf We're updating the README: #3577