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

[andrewbusch7]

I'm currently using [email protected] with @types/[email protected] 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 [email protected] 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/[email protected], I can open an issue at https://github.com/DefinitelyTyped/DefinitelyTyped.

[StringEpsilon]

[email protected] 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.