Outdated @reduxjs/toolkit definition

[michaelmior]

Library definition file name

@reduxjs/toolkit_v1.x.x/flow_v0.104.x-/toolkit_v1.x.x.js

Your dependent version

1.8.2

Flow Version

0.179.0

Description

Cannot resolve name T. [cannot-resolve-name]

     161│    *
     162│    * @public
     163│    */
     164│   declare function createAction(type: T): ActionCreatorWithoutPayload<typeof T>;
     165│   declare function createAction<P = void>(type: T): ActionCreatorWithPayload<P, typeof T>;
     166│
     167│   /**


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ flow-typed/npm/@reduxjs/toolkit_v1.x.x.js:185:144

Cannot resolve name A. [cannot-resolve-name]

     182│    *
     183│    * @public
     184│    */
     185│   declare function createReducer<S, CR = {| [string]: (S, Action<string>) => S |}>(initialState: S, actionsMap: CR): (state: S | void, action: A) => S;
     186│
     187│
     188│   /**


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/store.js:2:9

Cannot import configureStore because there is no configureStore export in @reduxjs/toolkit. [missing-export]

     1│ // @flow
     2│ import {configureStore} from '@reduxjs/toolkit';
     3│ import {connectRouter, routerMiddleware} from 'connected-react-router';
     4│ import thunk from 'redux-thunk';
     5│ import {createBrowserHistory} from 'history';



Found 6 errors
error Command failed with exit code 2.

Do you want to submit a pull request to fix this issue?

No (hope someone else can)

[michaelmior]

Thank you @Brianzchen!

This did resolve the particular errors I mentioned above, but still doesn't seem to be working correctly. It seems as though the parameters to configureStore are expecting all actions and states to have the same data. I put a couple representative examples of the errors below.

In this first case, an action defined in relexp has data sql associated with it which does not exist in the actions in data.

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/store.js:27:38

Cannot assign configureStore(...) to store because property sql is missing in Action [1] but exists in Action [2] in the
first parameter of property dispatch. [prop-missing]

     src/store.js
      24│   }
      25│ }
      26│
 [1]  27│ const store: Store<{}, Action<{}>> = configureStore({
      28│   reducer: {
      29│     router: connectRouter(history),
      30│
      31│     data,
      32│     relexp,
      33│   },
      34│   middleware: middleware,
      35│   enhancers: enhancers,
      36│ });
      37│
      38│ export default store;
      39│

     src/modules/relexp.js
 [2] 308│ const reducer: (State, Action) => State = produce<State, Action>(

Here, data contains a state property current which does not exist in relexp.

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/store.js:27:38

Cannot assign configureStore(...) to store because property current is missing in object type [1] but exists in
State [2] in the return value of the first parameter of property replaceReducer. [prop-missing]

     src/store.js
      24│   }
      25│ }
      26│
 [1]  27│ const store: Store<{}, Action<{}>> = configureStore({
      28│   reducer: {
      29│     router: connectRouter(history),
      30│
      31│     data,
      32│     relexp,
      33│   },
      34│   middleware: middleware,
      35│   enhancers: enhancers,
      36│ });
      37│
      38│ export default store;
      39│

     src/modules/data.js
 [2] 390│ const reducer: (State, Action) => State = produce<State, Action>(

Finally, I also see this since a few times I have actions with different types.

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/store.js:27:38

Cannot assign configureStore(...) to store because object type [1] is incompatible with string literal RESET_EXPR [2] in
property type of the first parameter of property dispatch. [incompatible-type]

     src/store.js
     24│   }
     25│ }
     26│
 [1] 27│ const store: Store<{}, Action<{}>> = configureStore({
     28│   reducer: {
     29│     router: connectRouter(history),
     30│
     31│     data,
     32│     relexp,
     33│   },
     34│   middleware: middleware,
     35│   enhancers: enhancers,
     36│ });
     37│
     38│ export default store;
     39│

     src/modules/data.js
 [2] 18│   type: 'RESET_EXPR',

[Brianzchen]

I see, let me see what I can do

[Brianzchen]

#4330 here's my WIP this should fix your reducer issue though I'm trying to make the types throw errors if they're not right.

Then will look into your action issue too

[michaelmior]

That does indeed fix the reducer issue. I'm now left with the following errors:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/store.js:27:38

Cannot assign configureStore(...) to store because undefined [1] is incompatible with object type [2] in the first
parameter of the first parameter of property replaceReducer. [incompatible-type]

     src/store.js
     24│   }
     25│ }
     26│
 [2] 27│ const store: Store<{}, Action<{}>> = configureStore({
     28│   reducer: {
     29│     router: connectRouter(history),
     30│
     31│     data,
     32│     relexp,
     33│   },
     34│   middleware: middleware,
     35│   enhancers: enhancers,
     36│ });
     37│
     38│ export default store;
     39│

     flow-typed/npm/@reduxjs/toolkit_v1.x.x.js
 [1] 11│   declare type Reducer<S, A> = (state: S | void, action: A) => S;

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/store.js:27:38

Cannot assign configureStore(...) to store because property type is missing in object type [1] but exists in object
type [2] in the return value of the first parameter of property replaceReducer. [prop-missing]

     src/store.js
     24│   }
     25│ }
     26│
 [1] 27│ const store: Store<{}, Action<{}>> = configureStore({
     28│   reducer: {
     29│     router: connectRouter(history),
     30│
     31│     data,
     32│     relexp,
     33│   },
     34│   middleware: middleware,
     35│   enhancers: enhancers,
     36│ });
     37│
     38│ export default store;
     39│

     flow-typed/npm/@reduxjs/toolkit_v1.x.x.js
 [2] 15│   declare type Dispatch<A: { type: any, ... }> = DispatchAPI<A>;

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/store.js:28:12

Cannot call configureStore with object literal bound to options because in property reducer: [incompatible-call]
 • Either a call signature declaring the expected parameter / return type is missing in object literal [1] but exists
   in Reducer [2].
 • Or property type is missing in object literal [1] but exists in object type [3].

        src/store.js
         25│ }
         26│
         27│ const store: Store<{}, Action<{}>> = configureStore({
    [1]  28│   reducer: {
         29│     router: connectRouter(history),
         30│
         31│     data,
         32│     relexp,
         33│   },
         34│   middleware: middleware,
         35│   enhancers: enhancers,
         36│ });

        flow-typed/npm/@reduxjs/toolkit_v1.x.x.js
 [2][3] 436│     reducer: Reducer<S, A> | $ObjMap<S, ReducersMapObject>,

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/store.js:34:15

Cannot call configureStore with object literal bound to options because property type is missing in object type [1] but
exists in object type [1] in type argument A of property dispatch of the first parameter of array element of property
middleware. [prop-missing]

     src/store.js
      31│     data,
      32│     relexp,
      33│   },
      34│   middleware: middleware,
      35│   enhancers: enhancers,
      36│ });
      37│

     flow-typed/npm/@reduxjs/toolkit_v1.x.x.js
 [1] 436│     reducer: Reducer<S, A> | $ObjMap<S, ReducersMapObject>,

[Brianzchen]

Are some of those errors related to your state obj not typed properly yet? Regarding your action I think you should have those typed as Action<string> according to the type def

  declare type Action<T> = {
    type: T,
    ...
  };

Let me know what you think and we can move forward 🤞

[michaelmior]

Interesting. I didn't have this issue before I upgraded to the latest version of @reduxjs/toolkit and my type definitions haven't changed. In any case, it does look like you're right. Changing to Action<string> results in the following errors:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/store.js:27:42

Cannot assign configureStore(...) to store because undefined [1] is incompatible with object type [2] in the first
parameter of the first parameter of property replaceReducer. [incompatible-type]

     src/store.js
     24│   }
     25│ }
     26│
 [2] 27│ const store: Store<{}, Action<string>> = configureStore({
     28│   reducer: {
     29│     router: connectRouter(history),
     30│
     31│     data,
     32│     relexp,
     33│   },
     34│   middleware: middleware,
     35│   enhancers: enhancers,
     36│ });
     37│
     38│ export default store;
     39│

     flow-typed/npm/@reduxjs/toolkit_v1.x.x.js
 [1] 11│   declare type Reducer<S, A> = (state: S | void, action: A) => S;

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/store.js:27:42

Cannot assign configureStore(...) to store because property type is missing in object type [1] but exists in object
type [2] in the return value of the first parameter of property replaceReducer. [prop-missing]

     src/store.js
     24│   }
     25│ }
     26│
 [1] 27│ const store: Store<{}, Action<string>> = configureStore({
     28│   reducer: {
     29│     router: connectRouter(history),
     30│
     31│     data,
     32│     relexp,
     33│   },
     34│   middleware: middleware,
     35│   enhancers: enhancers,
     36│ });
     37│
     38│ export default store;
     39│

     flow-typed/npm/@reduxjs/toolkit_v1.x.x.js
 [2] 15│   declare type Dispatch<A: { type: any, ... }> = DispatchAPI<A>;

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/store.js:28:12

Cannot call configureStore with object literal bound to options because in property reducer: [incompatible-call]
 • Either a call signature declaring the expected parameter / return type is missing in object literal [1] but exists
   in Reducer [2].
 • Or property type is missing in object literal [1] but exists in object type [3].

        src/store.js
         25│ }
         26│
         27│ const store: Store<{}, Action<string>> = configureStore({
    [1]  28│   reducer: {
         29│     router: connectRouter(history),
         30│
         31│     data,
         32│     relexp,
         33│   },
         34│   middleware: middleware,
         35│   enhancers: enhancers,
         36│ });

        flow-typed/npm/@reduxjs/toolkit_v1.x.x.js
 [2][3] 436│     reducer: Reducer<S, A> | $ObjMap<S, ReducersMapObject>,

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/store.js:34:15

Cannot call configureStore with object literal bound to options because property type is missing in object type [1] but
exists in object type [1] in type argument A of property dispatch of the first parameter of array element of property
middleware. [prop-missing]

     src/store.js
      31│     data,
      32│     relexp,
      33│   },
      34│   middleware: middleware,
      35│   enhancers: enhancers,
      36│ });
      37│

     flow-typed/npm/@reduxjs/toolkit_v1.x.x.js
 [1] 436│     reducer: Reducer<S, A> | $ObjMap<S, ReducersMapObject>,

[Brianzchen]

what happens once you type Store<{}, Action<string>> with the real object struct? Or you can try Store<{ ... }, Action<string>> unless you don't have exact by default enabled?

And does connectRouter(history) return typeof Reducer?

[michaelmior]

I don't have exact-by-default set. Also, using Store<{ ... }, … does not change anything.

As for connectRouter, this is from connected-react-router and it appears as though it has no return type declared (specifically, it uses declare module.exports: any;). However, removing the line of code that uses connectRouter also does not elminate the error message.

[Brianzchen]

ok thanks. So basically I'm trying to figure out how I can simulate the same errors you're getting so I (or anyone) can create a fix.

I'm just taking stabs in the dark right now. But what if you remove middleware or enhancers and if it does fix the issue, if so, what are those typed as? Same goes for the properties in reducer if you slowly remove them does it end up solving it?

Thanks though for working with me on this, I'm definitely keen to help you get flow-typed defs working but just difficult when I don't use the lib

[michaelmior]

Thanks so much for your help! The repository is here if you want to take a look at it. The main branch currently has a bunch of flow-typed libraries removed due to errors, but if you run npx flow-typed install you should end up in the same state I'm in.

Removing middleware and enhancers gets me down to one single error. Currently neither of these have a type annotation.

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/store.js:27:45

Cannot assign configureStore(...) to store because undefined [1] is incompatible with object type [2] in the first
parameter of the first parameter of property replaceReducer. [incompatible-type]

     src/store.js
     24│   }
     25│ }
     26│
 [2] 27│ const store: Store<{...}, Action<string>> = configureStore({
     28│   reducer: {
     29│     data,
     30│     relexp,
     31│   },
     32│ });
     33│
     34│ export default store;
     35│

     flow-typed/npm/@reduxjs/toolkit_v1.x.x.js
 [1] 11│   declare type Reducer<S, A> = (state: S | void, action: A) => S;

[Brianzchen]

OK! After much debugging you have two type problems, one is that you are importing Store from redux. Although the type defs were copied they seem to not be the same type def and seem to throw weird errors, instead can you change it to importing types from @reduxjs/toolkit

import {configureStore, type Store, type Action} from '@reduxjs/toolkit';

The other is a problem with compatibility of thunk with middlewares because in the past thunk was always passed through a $Compose and never directly into a type accepting middlewares

[Brianzchen]

I've applied the fixes! As mentioned above you'll just need to change your type imports around a bit and it should work as expected 🙏

[michaelmior]

Thanks so much for spending your time on this! Not sure why I didn't have the same errors before, but switching the type imports fixed things :)

[Brianzchen]

My pleasure!