Uncaught TypeError: history.back is not a function - possible clash with history package?

[andrewbusch7]

I'm currently using react-router-dom@5.2.0 with @types/react-router-dom@5.1.5 for the following code:

...
import { useHistory } from 'react-router-dom';

const MyComponent = (props: CheckHeaderProps) => {
	const history = useHistory();

	const handleClickBack = () => {
		history.back();
		// window.history.back();
	};
...

and when my handler triggers, I'm getting the following error in the console:

lazyRoutes.bundle.js?v=06347a23bbdadf32ca48:4469 Uncaught TypeError: history.back is not a function
    at handleClickBack (lazyRoutes.bundle.js?v=06347a23bbdadf32ca48:4469)
    at HTMLUnknownElement.callCallback (bundle.js?9964595406b7260bbd6b:197212)
    at Object.invokeGuardedCallbackDev (bundle.js?9964595406b7260bbd6b:197261)
    at invokeGuardedCallback (bundle.js?9964595406b7260bbd6b:197316)
    at invokeGuardedCallbackAndCatchFirstError (bundle.js?9964595406b7260bbd6b:197330)
    at executeDispatch (bundle.js?9964595406b7260bbd6b:197413)
    at executeDispatchesInOrder (bundle.js?9964595406b7260bbd6b:197438)
    at executeDispatchesAndRelease (bundle.js?9964595406b7260bbd6b:200302)
    at executeDispatchesAndReleaseTopLevel (bundle.js?9964595406b7260bbd6b:200311)
    at forEachAccumulated (bundle.js?9964595406b7260bbd6b:200283)

Below is the structure of history when logging/debugging:

{length: 4, action: "POP", location: {…}, createHref: ƒ, push: ƒ, …}
action: "POP"
block: ƒ block(prompt)
createHref: ƒ createHref(location)
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
length: 4
listen: ƒ listen(listener)
location: {pathname: "/my-page", search: "", hash: "", state: undefined, key: "vberwy"}
push: ƒ push(path, state)
replace: ƒ replace(path, state)
__proto__: Object

Notably, it has goBack() instead of back(), but when I type goBack() in my code, I get a TS compilation error.

I'm wondering if this is because I also have history@5.0.0 in this project. Is this a known incompatibility issue? For now, I'll have to just use window.history.back() instead.

If this is confidently an issue with @types/react-router-dom@5.1.5, I can open an issue at https://github.com/DefinitelyTyped/DefinitelyTyped.

[StringEpsilon]

History@5.0.0 has a lot of breaking changes that make it unsuitable to use with react-router-dom.

I've documented most of those I found in #811 (in addition to what's in the changelog) - but I completely overlooked the change from "goBack" to "back" and "goForward" to "forward".

You should use history@4, and the @types/history for that version until react-router version 6 comes out.