salvoravida/redux-first-history

Missing @types/reach__router dependencie when using RFH with React-router

theFreedomBanana opened this issue · 5 comments

Hi,
Updating react-router from V5 to V6 I moved to redux-first-history because connected-react-router does not support react-router V6. I also updated history to v5 because it is the version used in react-router v6. But compiling I have the folowing issue with redux-first-history :

node_modules/redux-first-history/build/es6/actions.d.ts(9,19): error TS2315: Type 'Location' is not generic.
node_modules/redux-first-history/build/es6/create.d.ts(2,46): error TS7016: Could not find a declaration file for module '@reach/router'. '/opt/atlassian/pipelines/agent/build/code/node_modules/@reach/router/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/reach__router` if it exists or add a new declaration (.d.ts) file containing `declare module '@reach/router';`
node_modules/redux-first-history/build/es6/reachify.d.ts(1,41): error TS7016: Could not find a declaration file for module '@reach/router'. '/opt/atlassian/pipelines/agent/build/code/node_modules/@reach/router/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/reach__router` if it exists or add a new declaration (.d.ts) file containing `declare module '@reach/router';` 

I kinda find wierd that I would have to install types from another router to use RFH with react-router. But I probably missing something...
On the other hand Location type used to be generic but isn't anymore.

@theFreedomBanana https://github.com/salvoravida/redux-first-history/releases/tag/v5.0.10

about the Location, the type is from your current history package. Are you sure have the correct package on your node modules?
have you uninstalled the old @types/history stuff?

lmk with v5.1.0

@salvoravida thanks for the update on the reach__router dependance!
Regarding the Location type I have removed @types/history and updated history to 5.3.0. One thing I don't understand is installing redux-first-history, I get the function locationChangeAction typed as follow:

export declare const locationChangeAction: (location: Location, action: Action) => {
    type: string;
    payload: {
        location: Location<unknown>;
        action: Action;
    };
};

And here you can see the Location type used as a generic, whereas looking at the source code I see it this way:

export const locationChangeAction = (location: Location, action: Action) => ({
   type: LOCATION_CHANGE,
   payload: { location, action },
});

PS: sorry to bother with something that is probably more related to my ability understanding the code than to the code itself

@salvoravida works like a charm! Thanks