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