salvoravida/redux-first-history

redux-first-history 5.2.0, react-redux 8.0.2, react-router 6.21.1 fails to render

steinarb opened this issue · 2 comments

steinarb commented

After upgrading from react-router 6.3.0 my application fails to render.

I get the following errors in the chromium devtools console:

index.js:37 Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    at invariant (index.js:37:1)
    at useRoutes (index.js:641:64)
    at Routes (index.js:888:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
invariant @ index.js:37
useRoutes @ index.js:641
Routes @ index.js:888
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
index.js:37 Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    at invariant (index.js:37:1)
    at useRoutes (index.js:641:64)
    at Routes (index.js:888:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
invariant @ index.js:37
useRoutes @ index.js:641
Routes @ index.js:888
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:18687 The above error occurred in the <Routes> component:

    at Routes (http://localhost:8181/oldalbum/bundle.js:53901:5)
    at Router (http://localhost:8181/oldalbum/bundle.js:55150:15)
    at HistoryRouter (http://localhost:8181/oldalbum/bundle.js:59086:22)
    at App (http://localhost:8181/oldalbum/bundle.js:7359:23)
    at Provider (http://localhost:8181/oldalbum/bundle.js:50627:3)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25892
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
index.js:37 Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    at invariant (index.js:37:1)
    at useRoutes (index.js:641:64)
    at Routes (index.js:888:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

The problem seems to be related to using the with the react-router?

I'm attaching my index.js (which creates the router) and the App.js which sets up the routes and the package.json

steinarb commented

I cleaned away first package-lock.json and then also node_modules and rebuilt and after upgrading all packages to their newest version the application runs and builds fine, also with react-router 6.21.1.
package.json

Closing this as no bug.

(I could fault npm... but then I still occasionally "rm -rf ~/.m2/repository" to fix things with maven)