Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Compatibility issues with react-router v5.x+ #256

Open
consciousweb opened this issue Dec 10, 2019 · 3 comments
Open

Compatibility issues with react-router v5.x+ #256

consciousweb opened this issue Dec 10, 2019 · 3 comments

Comments

@consciousweb
Copy link

upgrading react-router (which is necessary now that componentWillMount is becoming deprecated) results in many issues, and a site that does not work

here is my browsers output

VM11176 modules.js:7811 Warning: Failed context type: The context `router` is marked as required in `LinkContainer`, but its value is `undefined`.
    in LinkContainer (created by AuthenticatedNavigation)
    in ul (created by Nav)
    in Nav (created by AuthenticatedNavigation)
    in div (created by AuthenticatedNavigation)
    in AuthenticatedNavigation (created by Context.Consumer)
    in withRouter(AuthenticatedNavigation) (created by Navigation)
    in div (created by NavbarCollapse)
    in Transition (created by Collapse)
    in Collapse (created by NavbarCollapse)
    in NavbarCollapse (created by Navigation)
    in div (created by Grid)
    in Grid (created by Navbar)
    in nav (created by Navbar)
    in Navbar (created by Uncontrolled(Navbar))
    in Uncontrolled(Navbar) (created by Navigation)
    in Navigation (created by App)
    in div (created by styled.div)
    in styled.div (created by App)
    in App (created by ForwardRef)
    in ForwardRef
    in ForwardRef (created by Connect(Component))
    in Connect(Component)
    in Switch
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider
    in ThemeProvider
printWarning @ VM11176 modules.js:7811
checkPropTypes @ VM11176 modules.js:7873
getMaskedContext @ VM11176 modules.js:21147
constructClassInstance @ VM11176 modules.js:23518
updateClassComponent @ VM11176 modules.js:27737
beginWork$1 @ VM11176 modules.js:29510
beginWork$$1 @ VM11176 modules.js:35080
performUnitOfWork @ VM11176 modules.js:34022
workLoopSync @ VM11176 modules.js:33995
performSyncWorkOnRoot @ VM11176 modules.js:33594
(anonymous) @ VM11176 modules.js:21523
unstable_runWithPriority @ VM11176 modules.js:37894
runWithPriority$2 @ VM11176 modules.js:21473
flushSyncCallbackQueueImpl @ VM11176 modules.js:21518
flushSyncCallbackQueue @ VM11176 modules.js:21506
scheduleUpdateOnFiber @ VM11176 modules.js:33033
enqueueSetState @ VM11176 modules.js:23318
Component.setState @ VM11176 modules.js:5669
onStateChange @ VM11176 modules.js:47995
dispatch @ VM11176 modules.js:47148
(anonymous) @ VM11176 modules.js:49150
dispatch @ VM11176 modules.js:47563
(anonymous) @ VM11273 app.js:27556
(anonymous) @ VM11176 modules.js:49147
handleOnLogin @ VM11273 app.js:8300
(anonymous) @ VM11273 app.js:7962
(anonymous) @ VM11199 callback-hook.js:169
(anonymous) @ VM11222 accounts-base.js:314
each @ VM11199 callback-hook.js:144
loginCallbacks @ VM11222 accounts-base.js:313
loggedInAndDataReadyCallback @ VM11222 accounts-base.js:460
(anonymous) @ VM11172 meteor.js:1234
_maybeInvokeCallback @ VM11203 ddp-client.js:194
receiveResult @ VM11203 ddp-client.js:214
_livedata_result @ VM11203 ddp-client.js:1800
onMessage @ VM11203 ddp-client.js:1962
(anonymous) @ VM11202 socket-stream-client.js:216
forEachCallback @ VM11202 socket-stream-client.js:302
socket.onmessage @ VM11202 socket-stream-client.js:215
REventTarget.dispatchEvent @ VM11202 socket-stream-client.js:550
SockJS._dispatchMessage @ VM11202 socket-stream-client.js:1729
SockJS._didMessage @ VM11202 socket-stream-client.js:1795
that.ws.onmessage @ VM11202 socket-stream-client.js:1953
Show 13 more frames
11VM11176 modules.js:66775 Uncaught TypeError: Cannot read property 'history' of undefined
    at LinkContainer.render (VM11176 modules.js:66775)
    at finishClassComponent (VM11176 modules.js:27794)
    at updateClassComponent (VM11176 modules.js:27747)
    at beginWork$1 (VM11176 modules.js:29510)
    at HTMLUnknownElement.callCallback (VM11176 modules.js:9660)
    at Object.invokeGuardedCallbackDev (VM11176 modules.js:9709)
    at invokeGuardedCallback (VM11176 modules.js:9764)
    at beginWork$$1 (VM11176 modules.js:35104)
    at performUnitOfWork (VM11176 modules.js:34022)
    at workLoopSync (VM11176 modules.js:33995)
render @ VM11176 modules.js:66775
finishClassComponent @ VM11176 modules.js:27794
updateClassComponent @ VM11176 modules.js:27747
beginWork$1 @ VM11176 modules.js:29510
callCallback @ VM11176 modules.js:9660
invokeGuardedCallbackDev @ VM11176 modules.js:9709
invokeGuardedCallback @ VM11176 modules.js:9764
beginWork$$1 @ VM11176 modules.js:35104
performUnitOfWork @ VM11176 modules.js:34022
workLoopSync @ VM11176 modules.js:33995
performSyncWorkOnRoot @ VM11176 modules.js:33594
(anonymous) @ VM11176 modules.js:21523
unstable_runWithPriority @ VM11176 modules.js:37894
runWithPriority$2 @ VM11176 modules.js:21473
flushSyncCallbackQueueImpl @ VM11176 modules.js:21518
flushSyncCallbackQueue @ VM11176 modules.js:21506
scheduleUpdateOnFiber @ VM11176 modules.js:33033
enqueueSetState @ VM11176 modules.js:23318
Component.setState @ VM11176 modules.js:5669
onStateChange @ VM11176 modules.js:47995
dispatch @ VM11176 modules.js:47148
(anonymous) @ VM11176 modules.js:49150
dispatch @ VM11176 modules.js:47563
(anonymous) @ VM11273 app.js:27556
(anonymous) @ VM11176 modules.js:49147
handleOnLogin @ VM11273 app.js:8300
(anonymous) @ VM11273 app.js:7962
(anonymous) @ VM11199 callback-hook.js:169
(anonymous) @ VM11222 accounts-base.js:314
each @ VM11199 callback-hook.js:144
loginCallbacks @ VM11222 accounts-base.js:313
loggedInAndDataReadyCallback @ VM11222 accounts-base.js:460
(anonymous) @ VM11172 meteor.js:1234
_maybeInvokeCallback @ VM11203 ddp-client.js:194
receiveResult @ VM11203 ddp-client.js:214
_livedata_result @ VM11203 ddp-client.js:1800
onMessage @ VM11203 ddp-client.js:1962
(anonymous) @ VM11202 socket-stream-client.js:216
forEachCallback @ VM11202 socket-stream-client.js:302
socket.onmessage @ VM11202 socket-stream-client.js:215
REventTarget.dispatchEvent @ VM11202 socket-stream-client.js:550
SockJS._dispatchMessage @ VM11202 socket-stream-client.js:1729
SockJS._didMessage @ VM11202 socket-stream-client.js:1795
that.ws.onmessage @ VM11202 socket-stream-client.js:1953
Show 14 more frames
VM11176 modules.js:31167 The above error occurred in the <LinkContainer> component:
    in LinkContainer (created by AuthenticatedNavigation)
    in ul (created by Nav)
    in Nav (created by AuthenticatedNavigation)
    in div (created by AuthenticatedNavigation)
    in AuthenticatedNavigation (created by Context.Consumer)
    in withRouter(AuthenticatedNavigation) (created by Navigation)
    in div (created by NavbarCollapse)
    in Transition (created by Collapse)
    in Collapse (created by NavbarCollapse)
    in NavbarCollapse (created by Navigation)
    in div (created by Grid)
    in Grid (created by Navbar)
    in nav (created by Navbar)
    in Navbar (created by Uncontrolled(Navbar))
    in Uncontrolled(Navbar) (created by Navigation)
    in Navigation (created by App)
    in div (created by styled.div)
    in styled.div (created by App)
    in App (created by ForwardRef)
    in ForwardRef
    in ForwardRef (created by Connect(Component))
    in Connect(Component)
    in Switch
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider
    in ThemeProvider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ VM11176 modules.js:31167
logError @ VM11176 modules.js:31204
update.callback @ VM11176 modules.js:32556
callCallback @ VM11176 modules.js:23153
commitUpdateEffects @ VM11176 modules.js:23191
commitUpdateQueue @ VM11176 modules.js:23181
commitLifeCycles @ VM11176 modules.js:31484
commitLayoutEffects @ VM11176 modules.js:34668
callCallback @ VM11176 modules.js:9660
invokeGuardedCallbackDev @ VM11176 modules.js:9709
invokeGuardedCallback @ VM11176 modules.js:9764
commitRootImpl @ VM11176 modules.js:34406
unstable_runWithPriority @ VM11176 modules.js:37894
runWithPriority$2 @ VM11176 modules.js:21473
commitRoot @ VM11176 modules.js:34246
finishSyncRender @ VM11176 modules.js:33653
performSyncWorkOnRoot @ VM11176 modules.js:33631
(anonymous) @ VM11176 modules.js:21523
unstable_runWithPriority @ VM11176 modules.js:37894
runWithPriority$2 @ VM11176 modules.js:21473
flushSyncCallbackQueueImpl @ VM11176 modules.js:21518
flushSyncCallbackQueue @ VM11176 modules.js:21506
scheduleUpdateOnFiber @ VM11176 modules.js:33033
enqueueSetState @ VM11176 modules.js:23318
Component.setState @ VM11176 modules.js:5669
onStateChange @ VM11176 modules.js:47995
dispatch @ VM11176 modules.js:47148
(anonymous) @ VM11176 modules.js:49150
dispatch @ VM11176 modules.js:47563
(anonymous) @ VM11273 app.js:27556
(anonymous) @ VM11176 modules.js:49147
handleOnLogin @ VM11273 app.js:8300
(anonymous) @ VM11273 app.js:7962
(anonymous) @ VM11199 callback-hook.js:169
(anonymous) @ VM11222 accounts-base.js:314
each @ VM11199 callback-hook.js:144
loginCallbacks @ VM11222 accounts-base.js:313
loggedInAndDataReadyCallback @ VM11222 accounts-base.js:460
(anonymous) @ VM11172 meteor.js:1234
_maybeInvokeCallback @ VM11203 ddp-client.js:194
receiveResult @ VM11203 ddp-client.js:214
_livedata_result @ VM11203 ddp-client.js:1800
onMessage @ VM11203 ddp-client.js:1962
(anonymous) @ VM11202 socket-stream-client.js:216
forEachCallback @ VM11202 socket-stream-client.js:302
socket.onmessage @ VM11202 socket-stream-client.js:215
REventTarget.dispatchEvent @ VM11202 socket-stream-client.js:550
SockJS._dispatchMessage @ VM11202 socket-stream-client.js:1729
SockJS._didMessage @ VM11202 socket-stream-client.js:1795
that.ws.onmessage @ VM11202 socket-stream-client.js:1953
Show 20 more frames
10VM11176 modules.js:31167 The above error occurred in the <LinkContainer> component:
    in LinkContainer (created by AuthenticatedNavigation)
    in ul (created by DropdownMenu)
    in RootCloseWrapper (created by DropdownMenu)
    in DropdownMenu (created by Dropdown)
    in li (created by Dropdown)
    in Dropdown (created by Uncontrolled(Dropdown))
    in Uncontrolled(Dropdown) (created by NavDropdown)
    in NavDropdown (created by AuthenticatedNavigation)
    in ul (created by Nav)
    in Nav (created by AuthenticatedNavigation)
    in div (created by AuthenticatedNavigation)
    in AuthenticatedNavigation (created by Context.Consumer)
    in withRouter(AuthenticatedNavigation) (created by Navigation)
    in div (created by NavbarCollapse)
    in Transition (created by Collapse)
    in Collapse (created by NavbarCollapse)
    in NavbarCollapse (created by Navigation)
    in div (created by Grid)
    in Grid (created by Navbar)
    in nav (created by Navbar)
    in Navbar (created by Uncontrolled(Navbar))
    in Uncontrolled(Navbar) (created by Navigation)
    in Navigation (created by App)
    in div (created by styled.div)
    in styled.div (created by App)
    in App (created by ForwardRef)
    in ForwardRef
    in ForwardRef (created by Connect(Component))
    in Connect(Component)
    in Switch
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider
    in ThemeProvider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ VM11176 modules.js:31167
logError @ VM11176 modules.js:31204
update.callback @ VM11176 modules.js:32556
callCallback @ VM11176 modules.js:23153
commitUpdateEffects @ VM11176 modules.js:23191
commitUpdateQueue @ VM11176 modules.js:23181
commitLifeCycles @ VM11176 modules.js:31484
commitLayoutEffects @ VM11176 modules.js:34668
callCallback @ VM11176 modules.js:9660
invokeGuardedCallbackDev @ VM11176 modules.js:9709
invokeGuardedCallback @ VM11176 modules.js:9764
commitRootImpl @ VM11176 modules.js:34406
unstable_runWithPriority @ VM11176 modules.js:37894
runWithPriority$2 @ VM11176 modules.js:21473
commitRoot @ VM11176 modules.js:34246
finishSyncRender @ VM11176 modules.js:33653
performSyncWorkOnRoot @ VM11176 modules.js:33631
(anonymous) @ VM11176 modules.js:21523
unstable_runWithPriority @ VM11176 modules.js:37894
runWithPriority$2 @ VM11176 modules.js:21473
flushSyncCallbackQueueImpl @ VM11176 modules.js:21518
flushSyncCallbackQueue @ VM11176 modules.js:21506
scheduleUpdateOnFiber @ VM11176 modules.js:33033
enqueueSetState @ VM11176 modules.js:23318
Component.setState @ VM11176 modules.js:5669
onStateChange @ VM11176 modules.js:47995
dispatch @ VM11176 modules.js:47148
(anonymous) @ VM11176 modules.js:49150
dispatch @ VM11176 modules.js:47563
(anonymous) @ VM11273 app.js:27556
(anonymous) @ VM11176 modules.js:49147
handleOnLogin @ VM11273 app.js:8300
(anonymous) @ VM11273 app.js:7962
(anonymous) @ VM11199 callback-hook.js:169
(anonymous) @ VM11222 accounts-base.js:314
each @ VM11199 callback-hook.js:144
loginCallbacks @ VM11222 accounts-base.js:313
loggedInAndDataReadyCallback @ VM11222 accounts-base.js:460
(anonymous) @ VM11172 meteor.js:1234
_maybeInvokeCallback @ VM11203 ddp-client.js:194
receiveResult @ VM11203 ddp-client.js:214
_livedata_result @ VM11203 ddp-client.js:1800
onMessage @ VM11203 ddp-client.js:1962
(anonymous) @ VM11202 socket-stream-client.js:216
forEachCallback @ VM11202 socket-stream-client.js:302
socket.onmessage @ VM11202 socket-stream-client.js:215
REventTarget.dispatchEvent @ VM11202 socket-stream-client.js:550
SockJS._dispatchMessage @ VM11202 socket-stream-client.js:1729
SockJS._didMessage @ VM11202 socket-stream-client.js:1795
that.ws.onmessage @ VM11202 socket-stream-client.js:1953
Show 20 more frames
VM11172 meteor.js:1061 Exception in onLogin callback TypeError: Cannot read property 'history' of undefined
    at LinkContainer.render (VM11176 modules.js:66775)
    at finishClassComponent (VM11176 modules.js:27794)
    at updateClassComponent (VM11176 modules.js:27747)
    at beginWork$1 (VM11176 modules.js:29510)
    at HTMLUnknownElement.callCallback (VM11176 modules.js:9660)
    at Object.invokeGuardedCallbackDev (VM11176 modules.js:9709)
    at invokeGuardedCallback (VM11176 modules.js:9764)
    at beginWork$$1 (VM11176 modules.js:35104)
    at performUnitOfWork (VM11176 modules.js:34022)
    at workLoopSync (VM11176 modules.js:33995)
VM11176 modules.js:9854 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in App (created by ForwardRef)
    in ForwardRef
    in ForwardRef (created by Connect(Component))
    in Connect(Component)
    in Switch
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider
    in ThemeProvider
@Ron-Lavi Ron-Lavi mentioned this issue Dec 12, 2019
Merged
@Ron-Lavi
Copy link

what version are you using?
seem that "react-router-bootstrap": "^0.25.0"
works well react-router v5.x, or at least it solved it for me :)

@ddelrio1986
Copy link

ddelrio1986 commented Feb 3, 2020 •
edited

I ran into this issue as well after upgrading react-router. After upgrading react-router-bootstrap to the latest version the issue went away. I was using react-router-bootstrap v0.24.4 and upgraded to v0.25.0. I used npm install react-router-bootstrap@latest --save.

@holic
Copy link

holic commented Mar 16, 2020

I saw this too, which is fixed in #248 and released in 0.25.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@ddelrio1986 @holic @consciousweb @Ron-Lavi