"Cannot read properties of undefined (reading 'pathname')." when clicking on NavLink

[steinarb]

I have the following simple demo application: https://github.com/steinarb/frontend-karaf-demo

The application on master has a non-functional connected-react-router (non-functional since react-router-dom version is >6).

I'm trying to switch to redux-first-history (which I've successfully done in other applications), but when I do and click on a NavLink to navigate I get this stack trace in the chrome devtools console:

index.js:874 Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
    at Router (index.js:874:5)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateFunctionComponent (react-dom.development.js:19583:20)
    at beginWork (react-dom.development.js:21596:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27446:7)
    at performUnitOfWork (react-dom.development.js:26552:12)
    at workLoopSync (react-dom.development.js:26461:5)

When I google the error message I am told that this means that I have a react-router-dom Link or NavLink without a "to".
But as far as grep can tell me, the only instances are the 3 below, and all have to attributes which match the 3 routes in the router:

function App() {
    return (
        <Provider store={store}>
            <Router basename={basename}>
                <div className="App">
                    <div className="container">
                        <NavLink to="/"><button>Home</button></NavLink>
                        <NavLink to="/counter"><button>Counter</button></NavLink>
                        <NavLink to="/about"><button>About</button></NavLink>
                        <hr/>
                    </div>
                    <Routes>
                        <Route exact path="/" element={<Home/>} />
                        <Route path="/counter" element={<Counter/>} />
                        <Route path="/about" element={<About/>} />
                    </Routes>
                </div>
            </Router>
        </Provider>
    );
}

If I switch HistoryRouter with react-router-dom's BrowserRouter the error goes away.

A weird thing about the stack trace is that the Router is the basic router rather than the HistoryRouter that is the child of the Provider.

This may be a bug in react-first-history and its interaction with react-router 6.3.0 (which is the newest version of react-router I've been able to use in other applications) or it can be an error in my configuration , which I suspect it might be (since I have this working in other applications).

But if there is an error in my configuration of react-first-history and react-router-dom, I'm unable to spot it.

So all hints and tips are appeciated.

(the reason I started tinkering with redux-first-history in frontend-karaf-demo was to get a simple testbed to break the "react-router-dom 6.3.0 wall" that has stopped me upgrading other frontends. The frontend-karaf-demo strictly speaking doesn't need redux-first-history)

[steinarb]

Hm... this looks like a place where Router may be called...? https://github.com/salvoravida/redux-first-history/blob/master/rr6/index.js#L20

And the location sent to the Router is the location currently current in the history...?
And that location has an undefined pathname...?

[steinarb]

history is not a direct dependency of my package.json.

The failing project has the following in package-lock.json:

        "node_modules/history": {
            "version": "4.10.1",
            "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
            "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
            "peer": true,
            "dependencies": {
                "@babel/runtime": "^7.1.2",
                "loose-envify": "^1.2.0",
                "resolve-pathname": "^3.0.0",
                "tiny-invariant": "^1.0.2",
                "tiny-warning": "^1.0.0",
                "value-equal": "^1.0.1"
            }
        },

The working project has the following in its package-lock.json:

        "node_modules/history": {
            "version": "5.3.0",
            "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
            "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
            "dependencies": {
                "@babel/runtime": "^7.7.6"
            }
        },

Looks like 5.3.0 is the current version of history? https://www.npmjs.com/package/history

I'll try an explicit dependency to it tomorrow.

[steinarb]

I didn't wait until tomorrow, but instead tried an explicity dependency to history 5.3.0 now, and that fixed the problem:
package.json

With this in place, navigation works without crashing and fires LOCATION_CHANGE actions in redux.

I removed the explicit history 5.3.0 dependency from package.json but kept the resolved 5.3.0 in package-lock.json and the application continued to work.

Closing this as resoved fixed. (to googlers seeing the same thing: check what version of history is actually used)