@types/react 18.0.0 not compatible with Easy Peasy

[w3bdesign]

I am getting a Typescript error if I upgrade @types/react to version 18.0.0 and use Easy Peasy:

Type error: No overload matches this call.

Overload 1 of 2, '(props: { store: Store<StoreModel, EasyPeasyConfig<undefined, {}>>; } | Readonly<{ store: Store<StoreModel, EasyPeasyConfig<undefined, {}>>; }>): StoreProvider<...>', gave the following error.

Overload 2 of 2, '(props: { store: Store<StoreModel, EasyPeasyConfig<undefined, {}>>; }, context: any): StoreProvider<StoreModel>', gave the following error.

     <StoreProvider store={store}>
     <Component {...pageProps} />
      </StoreProvider>

[wclear]

Here is an example of how to temporarily workaround this issue until the fix is published:

...
import { StoreProvider } from 'easy-peasy';

const StoreProviderOverride = StoreProvider as any;

function WebAppContainer() {
	return (
		<StoreProviderOverride store={webAppStore}>
			...
		</StoreProviderOverride>
	)
}

[w3bdesign]

Here is an example of how to temporarily workaround this issue until the fix is published:

...
import { StoreProvider } from 'easy-peasy';

const StoreProviderOverride = StoreProvider as any;

function WebAppContainer() {
	return (
		<StoreProviderOverride store={webAppStore}>
			...
		</StoreProviderOverride>
	)
}

@wclear

Wouldn't this disable Typescript if you cast the provider as any?

[asiraky]

I believe the more correct way to augment the type is to do the following:

type Props = StoreProvider["props"] & { children: React.ReactNode }

const StoreProviderCasted = StoreProvider as unknown as React.ComponentType<Props>

function WebAppContainer() {
    return (
        <StoreProviderCasted store={webAppStore}>
            ...
        </StoreProviderCasted>
    )
}

This will keep all the strong typing and add the children prop back to the type.

[mighdoll]

For convenience until a new rev is published, I pushed a fork to github with @magicdawn's fix. You can use the fork from package.json like this:

"easy-peasy": "mighdoll/patched-peasy#fix-explicit-children",

[liamdefty]

Just noting that from my findings another change is needed for react 18 support

In React 18 the FunctionalComponent interface has changed. The PropsWithChildren type is omitted which means a similar issue for createContextStore. I think all we'd need to do is wrap the Provider typing with PropsWithChildren

https://github.com/ctrlplusb/easy-peasy/blob/master/index.d.ts#L1093-L1096

Provider: React.FC<PropsWithChildren{
    runtimeModel?: RuntimeModel;
    injections?: Injections | ((previousInjections: Injections) => Injections);
  }>>;

[azuken]

We have also an error when trying to use Store Provider as JSX element, created with createContextStore function.

Type error: Type '{ children: ReactNode; }' has no properties in common with type 'IntrinsicAttributes & { runtimeModel?: { my: MyModel }; injections?: {} | ((previousInjections: {}) => {}); }'.

  16 |   }
  17 | 
> 18 |   return <MyContextStore.Provider>{props.children}</MyContextStore.Provider>;
     |           ^
  19 | };
  20 | 
  21 | export { MyProvider, MyContextStore };

[ctrlplusb]

FYI please see;

https://github.com/ctrlplusb/easy-peasy/issues/740#issuecomment-1248303046

[ctrlplusb]

Fixed in v5.1.0 🎉