Using backwards compatibility library with dependency which uses react-router-dom v5

[neilredford-sky]

I have a dependency which uses react-router-dom v5.1.2 and I am unable to upgrade this.
I'm using react-router-dom-v5-compat v6.3.0 in the parent app and I have completely migrated the app over to using react router v6 components and hooks.

When I load the component containing the above dependency I see the following error
react-router.js:706 Uncaught TypeError: Cannot read properties of undefined (reading 'history') at useHistory (react-router.js:706:29)

I thought adding CompatRouter below my BrowserRouter would fix this but when I do this I see a different error and the app fails to load entirely
scheduler.development.js:178 Uncaught TypeError: Cannot read properties of undefined (reading 'history') at useHistory (react-router.js:706:29) at CompatRouter (index.js:386:17)

Any help on this would be greatly appreciated.

[tonywang402]

I guess your webpack config cause this issue. Because we hope import useHistory from react-router v6 inside react-router-dom-v5-compat, not react-router v5 in your direct node module

You may need to add the relative path before the absolute path in resolve.modules of webpack config.

https://webpack.js.org/configuration/resolve/#resolvemodules