Definitelytyped: react-router and history aren't always compatible

[MadaraUchiha]

• [x] I tried using the latest react-router/index.d.ts file in this repo and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript (2.1.5)
• [x] I want to talk about react-router/index.d.ts.
  
  
  
  • The authors of that type definition are cc/ @sergey-buturlakin @ngbrown
  
  

The problem

My TypeScript compilation was just broken with a bunch of errors like

@types/react-router/lib/history"' has no exported member 'Location'
@types/react-router/lib/history"' has no exported member 'LocationDescriptor'
@types/react-router/lib/history"' has no exported member 'Pathname'
@types/react-router/lib/history"' has no exported member 'Path'
@types/react-router/lib/history"' has no exported member 'Query'
@types/react-router/lib/history"' has no exported member 'HistoryQueries'
@types/react-router/lib/history"' has no exported member 'QueryString'
@types/react-router/lib/history"' has no exported member 'LocationState'
@types/react-router/lib/history"' has no exported member 'Href'

Investigating

Turns out, I had @types/react-router version ^2.0.44, which is the latest, but I got @types/history version 4.5.0, which is also latest, but incompatible.

I can see that this is a relatively new change (4 days ago). The package.json file of @types/react-router shows @types/history dependency with version '*'.

My conclusions (which may or may not be wrong):

• @types/history was advanced while @types/react-router was not.
• The tool that generates NPM packages out of @types makes dependencies as '*' by default which may not be the optimal solutions.

Workaround/fix

npm i --save-dev @types/history@^2.0.45, one version earlier, fixed the problem.

cc @benjamingr

[ChrisJamesC]

Thanks for the workaround! With yarn I had to do one more step: remove and reinstall @types/react-router so it uses the correct version for @types/history:

yarn add @types/history@^2.0.45
yarn remove @types/react-router
yarn add @types/react-router

[MadaraUchiha]

I just realized I might have pinged the wrong people. cc @rokoroku @andy-ms

[rokoroku]

Try install @types/react-router@^2.0.45.
I just test with this version, and It resolves @types/history@^2 correctly.

[MadaraUchiha]

I've tried that, it didn't resolve the dependency correctly and resulted in an error. Something funky is going on here.

It didn't work when I specifically npm install --save-dev @types/react-router@^2.0.45, nor when I had that entry in package.json and just typed npm i.

[rokoroku]

@MadaraUchiha Could you share your dependencies from package.json file? There seems to be a discrepancy between type dependencies somewhere.

[MadaraUchiha]

@rokoroku I have it fixed now in my main repo, so I can't really give you an example that I can guarantee reproduces this issue.

I'll try to set up a reduced example later today.

[andy-ms]

This should have already been fixed. npm info @types/react-router dependencies

[mtucciarone]

Is there a reason why history was set to "*" in the package though?

[3plusalpha]

I faced the same issue today. Solved by using "@types/history": "@^2.0.46" and "@types/react-router": "^2.0.44" and "react-router": "^2.0.44".
I tried initially installing the latest react-router 3.x.

[hom-bahrani]

I'm getting this issue with react-router-dom v4, I tried installing "@types/history": "@^2.0.46" and that didn't work

"@types/history": "4.7.2",
"@types/react-router": "4.4.1",
"@types/react-router-dom": "4.3.1",

[psyfire25]

I believe I am having the same issue as @hom-bahrani any help would be great thanks.

[jweyrich]

Also having issues importing History and other types from 'history'.

Scenario

• The compiler fails to find any types exported by @types/history/index.d.ts;
• Checked the @types/history's package.json and it has the proper "types": "index.d.ts" - so it should work;
• My tsconfig.json doesn't specify custom typeRoots;

I'm doing import { History, Location } from 'history' and tsc is failing to compile it.

Compiler output

Failed to compile.

./src/Routed.ts
Attempted import error: 'History' is not exported from 'history'.

Package versions

• react-router-dom => 5.1.2
• @types/react-router-dom => 5.1.3
• react-router => 5.1.2
• @types/react-router => 5.1.4
• history => 4.10.1
• @types/history => 4.7.5

Tried downgrading the history package, but no luck. I did not try to play with package versions because I used create-react-app - I did not know if I would break anything by changing any package version manually.

How to reproduce (as of 2020-02-07)

1. Create project

npx create-react-app foobar --template typescript && cd foobar
yarn add react-router-dom
yarn add @types/react-router-dom

PS: react-router-dom depends on react-router and history, so you don't need to install those yourself.

1. Then just try to use the imports mentioned at the top of my comment.

Anyone has an idea of what else could be wrong?

[MetheusX]

For me I just solved it with this combination just now:

• react-router-dom => 5.2.0
• history => 4.10.0
• @types/react-router-dom => 5.1.5
• @types/history => 4.7.6