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

Bug: Navbar disappears when clicking on Ballot To-Do List / How We Vote Works (not logged in) #3289

Closed
aucoeur opened this issue Jun 26, 2021 · 3 comments
Closed

Bug: Navbar disappears when clicking on Ballot To-Do List / How We Vote Works (not logged in) #3289

aucoeur opened this issue Jun 26, 2021 · 3 comments

Comments

@aucoeur
Copy link

aucoeur commented Jun 26, 2021 •
edited
Loading

Summary:
The top navbar disappears when clicking on Ballot To-Do List / How We Vote Works (not logged in)

Steps to reproduce: On the live site only
(didn't have this particular problem running the develop branch locally)

  1. As an anonymous user (not logged in), starting from
  1. Clicking on 'Ballot To-Do List' title or 'How We Vote Works' button does not open modal but the navbar disappears and the modal doesn't open. Refresh will something bring it back but not always.

Reproducible on the current live site on at least Brave, Chrome and Safari. The behavior is mostly but not always consistent. Doesn't seem to occur when running WebApp from the current local develop branch

Screenshot
webapp_navbar_disappear_unregistered_user

References:
Not sure if this error is related
image

Additional error logs in a comment below
@aucoeur
Copy link
Author

aucoeur commented Jun 26, 2021 

HowItWorks.jsx:125 Uncaught TypeError: Cannot read property 'params' of undefined
    at HowItWorks.componentDidMount (HowItWorks.jsx:125)
    at commitLifeCycles (react-dom.development.js:20663)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22990)
    componentDidMount @ HowItWorks.jsx:125
    commitLifeCycles @ react-dom.development.js:20663
    commitLayoutEffects @ react-dom.development.js:23426
    callCallback @ react-dom.development.js:3945
    invokeGuardedCallbackDev @ react-dom.development.js:3994
    invokeGuardedCallback @ react-dom.development.js:4056
    commitRootImpl @ react-dom.development.js:23151
    unstable_runWithPriority @ scheduler.development.js:468
    runWithPriority$1 @ react-dom.development.js:11276
    commitRoot @ react-dom.development.js:22990
    performSyncWorkOnRoot @ react-dom.development.js:22329
    (anonymous) @ react-dom.development.js:11327
    unstable_runWithPriority @ scheduler.development.js:468
    runWithPriority$1 @ react-dom.development.js:11276
    flushSyncCallbackQueueImpl @ react-dom.development.js:11322
    flushSyncCallbackQueue @ react-dom.development.js:11309
    discreteUpdates$1 @ react-dom.development.js:22420
    discreteUpdates @ react-dom.development.js:3756
    dispatchDiscreteEvent @ react-dom.development.js:5889

HowItWorks.jsx:207 Uncaught TypeError: Cannot read property 'remove' of undefined
    at HowItWorks.componentWillUnmount (HowItWorks.jsx:207)
    at callComponentWillUnmountWithTimer (react-dom.development.js:20413)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at safelyCallComponentWillUnmount (react-dom.development.js:20420)
    at commitUnmount (react-dom.development.js:20951)
    at commitNestedUnmounts (react-dom.development.js:21004)
    at unmountHostComponents (react-dom.development.js:21290)
    at commitUnmount (react-dom.development.js:20969)
    componentWillUnmount @ HowItWorks.jsx:207
    callComponentWillUnmountWithTimer @ react-dom.development.js:20413
    callCallback @ react-dom.development.js:3945
    invokeGuardedCallbackDev @ react-dom.development.js:3994
    invokeGuardedCallback @ react-dom.development.js:4056
    safelyCallComponentWillUnmount @ react-dom.development.js:20420
    commitUnmount @ react-dom.development.js:20951
    commitNestedUnmounts @ react-dom.development.js:21004
    unmountHostComponents @ react-dom.development.js:21290
    commitUnmount @ react-dom.development.js:20969
    commitNestedUnmounts @ react-dom.development.js:21004
    unmountHostComponents @ react-dom.development.js:21290
    commitDeletion @ react-dom.development.js:21347
    commitMutationEffects @ react-dom.development.js:23407
    callCallback @ react-dom.development.js:3945
    invokeGuardedCallbackDev @ react-dom.development.js:3994
    invokeGuardedCallback @ react-dom.development.js:4056
    commitRootImpl @ react-dom.development.js:23121
    unstable_runWithPriority @ scheduler.development.js:468
    runWithPriority$1 @ react-dom.development.js:11276
    commitRoot @ react-dom.development.js:22990
    performSyncWorkOnRoot @ react-dom.development.js:22329
    (anonymous) @ react-dom.development.js:11327
    unstable_runWithPriority @ scheduler.development.js:468
    runWithPriority$1 @ react-dom.development.js:11276
    flushSyncCallbackQueueImpl @ react-dom.development.js:11322
    flushSyncCallbackQueue @ react-dom.development.js:11309
    discreteUpdates$1 @ react-dom.development.js:22420
    discreteUpdates @ react-dom.development.js:3756
    dispatchDiscreteEvent @ react-dom.development.js:5889
    react_devtools_backend.js:2560 The above error occurred in the <HowItWorks> 
   component:
  
      at HowItWorks (https://wevote.us/defaultWeVote.bundle.js:94942:83)
      at WithStyles (https://wevote.us/materialStyle.bundle.js:29771:31)
      at div
      at div
      at DialogContent (https://wevote.us/materialStyle.bundle.js:4919:23)
      at WithStyles (https://wevote.us/materialStyle.bundle.js:29771:31)
      at div
      at Paper (https://wevote.us/materialStyle.bundle.js:12092:23)
      at WithStyles (https://wevote.us/materialStyle.bundle.js:29771:31)
      at div
      at Transition (https://wevote.us/defaultVendors.bundle.js:64336:30)
      at Fade (https://wevote.us/materialStyle.bundle.js:5408:24)
      at Unstable_TrapFocus (https://wevote.us/materialStyle.bundle.js:19749:24)
      at div
      at Portal (https://wevote.us/materialStyle.bundle.js:13127:24)
      at Modal (https://wevote.us/materialStyle.bundle.js:10478:75)
      at Dialog (https://wevote.us/materialStyle.bundle.js:4516:29)
      at WithStyles (https://wevote.us/materialStyle.bundle.js:29771:31)
      at HowItWorksModal (https://wevote.us/defaultWeVote.bundle.js:16878:83)
      at WithStyles (https://wevote.us/materialStyle.bundle.js:29771:31)
      at WithTheme (https://wevote.us/materialStyle.bundle.js:29909:28)
      at div
      at Header (https://wevote.us/defaultWeVote.bundle.js:31007:83)
      at div
      at Application (https://wevote.us/defaultWeVote.bundle.js:98:83)
      at Suspense
      at Router (https://wevote.us/reactCore.bundle.js:44417:30)
      at WeVoteRouter (https://wevote.us/defaultWeVote.bundle.js:639:83)
      at Ge (https://wevote.us/materialStyle.bundle.js:31692:16880)
      at ThemeProvider (https://wevote.us/materialStyle.bundle.js:28648:24)
      at Suspense

React will try to recreate this component tree from scratch using the error boundary you provided, Header.

overrideMethod @ react_devtools_backend.js:2560
r @ fs.js:3
logCapturedError @ react-dom.development.js:20085
callback @ react-dom.development.js:20154
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20709
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
react_devtools_backend.js:2560 

Header caught error:  TypeError: Cannot read property 'params' of undefined with info:  {componentStack: "\n    at HowItWorks (https://wevote.us/defaultWeVot…materialStyle.bundle.js:28648:24)\n    at Suspense"} 
    at Header (https://wevote.us/defaultWeVote.bundle.js:31007:83)
    at div
    at Application (https://wevote.us/defaultWeVote.bundle.js:98:83)
    at Suspense
    at Router (https://wevote.us/reactCore.bundle.js:44417:30)
    at WeVoteRouter (https://wevote.us/defaultWeVote.bundle.js:639:83)
    at Ge (https://wevote.us/materialStyle.bundle.js:31692:16880)
    at ThemeProvider (https://wevote.us/materialStyle.bundle.js:28648:24)
    at Suspense
   overrideMethod @ react_devtools_backend.js:2560
   r @ fs.js:3
componentDidCatch @ Header.jsx:84
callback @ react-dom.development.js:20159
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20709
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
react_devtools_backend.js:2560 The above error occurred in the <HowItWorks> component:

    at HowItWorks (https://wevote.us/defaultWeVote.bundle.js:94942:83)
    at WithStyles (https://wevote.us/materialStyle.bundle.js:29771:31)
    at div
    at div
    at DialogContent (https://wevote.us/materialStyle.bundle.js:4919:23)
    at WithStyles (https://wevote.us/materialStyle.bundle.js:29771:31)
    at div
    at Paper (https://wevote.us/materialStyle.bundle.js:12092:23)
    at WithStyles (https://wevote.us/materialStyle.bundle.js:29771:31)
    at div
    at Transition (https://wevote.us/defaultVendors.bundle.js:64336:30)
    at Fade (https://wevote.us/materialStyle.bundle.js:5408:24)
    at Unstable_TrapFocus (https://wevote.us/materialStyle.bundle.js:19749:24)
    at div
    at Portal (https://wevote.us/materialStyle.bundle.js:13127:24)
    at Modal (https://wevote.us/materialStyle.bundle.js:10478:75)
    at Dialog (https://wevote.us/materialStyle.bundle.js:4516:29)
    at WithStyles (https://wevote.us/materialStyle.bundle.js:29771:31)
    at HowItWorksModal (https://wevote.us/defaultWeVote.bundle.js:16878:83)
    at WithStyles (https://wevote.us/materialStyle.bundle.js:29771:31)
    at WithTheme (https://wevote.us/materialStyle.bundle.js:29909:28)
    at div
    at Header (https://wevote.us/defaultWeVote.bundle.js:31007:83)
    at div
    at Application (https://wevote.us/defaultWeVote.bundle.js:98:83)
    at Suspense
    at Router (https://wevote.us/reactCore.bundle.js:44417:30)
    at WeVoteRouter (https://wevote.us/defaultWeVote.bundle.js:639:83)
    at Ge (https://wevote.us/materialStyle.bundle.js:31692:16880)
    at ThemeProvider (https://wevote.us/materialStyle.bundle.js:28648:24)
    at Suspense

React will try to recreate this component tree from scratch using the error boundary you provided, Header.
overrideMethod @ react_devtools_backend.js:2560
r @ fs.js:3
logCapturedError @ react-dom.development.js:20085
callback @ react-dom.development.js:20154
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20709
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
react_devtools_backend.js:2560 Header caught error:  TypeError: Cannot read property 'remove' of undefined with info:  {componentStack: "\n    at HowItWorks (https://wevote.us/defaultWeVot…materialStyle.bundle.js:28648:24)\n    at Suspense"} 
    at Header (https://wevote.us/defaultWeVote.bundle.js:31007:83)
    at div
    at Application (https://wevote.us/defaultWeVote.bundle.js:98:83)
    at Suspense
    at Router (https://wevote.us/reactCore.bundle.js:44417:30)
    at WeVoteRouter (https://wevote.us/defaultWeVote.bundle.js:639:83)
    at Ge (https://wevote.us/materialStyle.bundle.js:31692:16880)
    at ThemeProvider (https://wevote.us/materialStyle.bundle.js:28648:24)
    at Suspense
overrideMethod @ react_devtools_backend.js:2560
r @ fs.js:3
componentDidCatch @ Header.jsx:84
callback @ react-dom.development.js:20159
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20709
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
react_devtools_backend.js:2560 Warning: Header: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
    at Header (https://wevote.us/defaultWeVote.bundle.js:31007:83)
    at div
    at Application (https://wevote.us/defaultWeVote.bundle.js:98:83)
    at Suspense
    at Router (https://wevote.us/reactCore.bundle.js:44417:30)
    at WeVoteRouter (https://wevote.us/defaultWeVote.bundle.js:639:83)
    at Ge (https://wevote.us/materialStyle.bundle.js:31692:16880)
    at ThemeProvider (https://wevote.us/materialStyle.bundle.js:28648:24)
    at Suspense
overrideMethod @ react_devtools_backend.js:2560
r @ fs.js:3
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
callback @ react-dom.development.js:20169
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20709
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889`

@ayalaltd
Copy link

Hello, we tried to reproduce the issue however it looks like the UI changed since June of 2021. Could someone please advise?

@aucoeur
Copy link
Author

aucoeur commented Aug 4, 2022

I was also unable to recreate the bug with the new UI, so this bug is likely irrelevant now. I will close the issue :]

@aucoeur aucoeur closed this as completed Aug 4, 2022
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
2 participants
@ayalaltd @aucoeur