Search code examples
reduxeasy-peasy

Easy-Peasy StoreProvider returns the error "Property 'children' does not exist on type..."

I got this error on <StoreProvider ...> Why? What can be wrong with the children? :(

TS2769: 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.
    Type '{ children: Element; store: Store<StoreModel, EasyPeasyConfig<undefined, {}>>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<StoreProvider<StoreModel>> & Readonly<{ store: Store<StoreModel, EasyPeasyConfig<...>>; }>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<StoreProvider<StoreModel>> & Readonly<{ store: Store<StoreModel, EasyPeasyConfig<...>>; }>'.
  Overload 2 of 2, '(props: { store: Store<StoreModel, EasyPeasyConfig<undefined, {}>>; }, context: any): StoreProvider<StoreModel>', gave the following error.
    Type '{ children: Element; store: Store<StoreModel, EasyPeasyConfig<undefined, {}>>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<StoreProvider<StoreModel>> & Readonly<{ store: Store<StoreModel, EasyPeasyConfig<...>>; }>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<StoreProvider<StoreModel>> & Readonly<{ store: Store<StoreModel, EasyPeasyConfig<...>>; }>'.

import { StoreProvider } from 'easy-peasy';
import store from './store';
...
root.render(
  <React.StrictMode>
    <StoreProvider store={store}>
      <ApolloProvider client={client}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </ApolloProvider>
    </StoreProvider>
  </React.StrictMode>
);

The store:

import { createStore } from 'easy-peasy';
import { storeModel } from './model';

const store = createStore(storeModel);

export default store;

enter image description here

Solution

  • I found the answer here:

    https://github.com/ctrlplusb/easy-peasy/issues/741

    This is an issue with React 18.