Following migration steps for v5 -> v6 ends with app not rendering

[james-reed-toshi]

I'm following the steps for the migration guide here #8753 and have completed up to and including 3) Render the Compatibility Router, which is (as far as I understand) supposed to give me a functional and working app. However, I am getting this error:

index.js:388 Uncaught TypeError: Cannot read properties of undefined (reading 'location')
    at index.js:388:1
    at mountState (react-dom.development.js:15626:1)
    at Object.useState (react-dom.development.js:16248:1)
    at useState (react.development.js:1508:1)
    at CompatRouter (index.js:387:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at HTMLUnknownElement.__trace__ (bugsnag.js:2795:1)
(anonymous) @ index.js:388
mountState @ react-dom.development.js:15626
useState @ react-dom.development.js:16248
useState @ react.development.js:1508
CompatRouter @ index.js:387
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
__trace__ @ bugsnag.js:2795
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
reactRender @ reactRender.js:16
render @ clientStartup.js:130
forEachReactOnRailsComponentInitialize @ clientStartup.js:56
reactOnRailsPageLoaded @ clientStartup.js:159
renderInit @ clientStartup.js:188
setTimeout (async)
clientStartup @ clientStartup.js:235
./node_modules/react-on-rails/node_package/lib/ReactOnRails.js @ ReactOnRails.js:235
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./app/assets/entries/my_app_bundle.js @ my_app_bundle.js:22
__webpack_require__ @ bootstrap:24
__webpack_exec__ @  sync \b\B:9
(anonymous) @  sync \b\B:9
__webpack_require__.O @ chunk loaded:25
(anonymous) @  sync \b\B:9
webpackJsonpCallback @ jsonp chunk loading:525
(anonymous) @ my_app_bundle.js:1
react-dom.development.js:20085 The above error occurred in the <CompatRouter> component:
    at CompatRouter (https://my.app.test/packs/js/vendors-node_modules_emotion_react_dist_emotion-react_browser_esm_js-node_modules_emotion_rea-c88fda.js:71859:5)
    at ErrorBoundary (https://my.app.test/packs/js/vendors-node_modules_bugsnag_js_browser_notifier_js-node_modules_bugsnag_plugin-react_dist_bu-d3183c.js:3697:32)
    at App

I understand that there are more steps to get my app v6-ified, but I thought that after step 3, I should be able to get a functioning app, without having to do the huge refactor all in one go?

Thanks,
James

[cjinc121]

I also am facing the same issue, was this resolved?

[james-reed-toshi]

@cjinc121 I had stupidly replaced <BrowserRouter> with <CompatRouter>, when you are supposed to put the compatrouter inside the browserrouter.

[cjinc121]

I have nested CompatRouter inside Browser Router only @james-reed-toshi

[james-reed-toshi]

And you have made sure that you haven't upgraded react-router or react-router-dom itself yet, right? And you are still using BrowserRouter from react-router-dom, not from the compat library?

[cjinc121]

thanks, @james-reed-toshi , i had erroneously nested in reverse order .

[james-reed-toshi]

No worries! :)

[oleg-codaio]

One other place to check is your webpack config or package.json resolutions - I ran into a similar issue due to having bad config in resolve. This was causing an older version of react-router to be pulled in instead of the latest, within the compat package.