search

digidem / react-mapfilter

Visualizing, exploring, filtering and printing geographic data and geotagged photos and video
https://lab.digital-democracy.org/mapfilter
29 stars 11 forks source link

Hooks error #99

Closed okdistribute closed 4 years ago

okdistribute commented 4 years ago

Today, got this error on my branch after fixing issues on v3. I don't know enough about hooks to debug this right now. @gmaclennan do you know why this is happening? 

/home/okdistribute/n…development.js:1590 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/home/okdistribute/n…development.js:1590)
    at Object.useMemo (/home/okdistribute/n…development.js:1642)
    at WrappedMapView (/home/okdistribute/n…s/ViewWrapper.js:88)
    at renderWithHooks (node_modules/react-d…evelopment.js:16260)
    at mountIndeterminateComponent (node_modules/react-d…evelopment.js:18794)
    at beginWork$1 (node_modules/react-d…evelopment.js:20162)
    at HTMLUnknownElement.callCallback (node_modules/react-d….development.js:336)
    at Object.invokeGuardedCallbackDev (node_modules/react-d….development.js:385)
    at invokeGuardedCallback (node_modules/react-d….development.js:440)
    at beginWork$$1 (node_modules/react-d…evelopment.js:25780)
/home/okdistribute/n…evelopment.js:21843 The above error occurred in the <FilterPanel> component:
    in FilterPanel (created by LeftPanel)
    in div (created by LeftPanel)
    in LeftPanel (created by MapFilter)
    in div (created by MapFilter)
    in MapFilter (created by Transition)
    in div (created by styled.div)
    in styled.div (created by Transition)
    in Transition (created by TabPanel)
    in TabPanel (created by Home)
    in div (created by styled.div)
    in styled.div (created by Home)
    in div (created by styled.div)
    in styled.div (created by Home)
    in Home (created by App)
    in IntlProvider (created by App)
    in ThemeProvider (created by App)
    in StylesProvider (created by App)
    in App

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.
/home/okdistribute/n…timber/index.js:118 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/home/okdistribute/n…development.js:1590)
    at Object.useContext (/home/okdistribute/n…development.js:1598)
    at useTheme (/home/okdistribute/n…heme/useTheme.js:15)
    at /home/okdistribute/n…s/makeStyles.js:242
    at FilterPanel (/home/okdistribute/n…/FilterPanel.js:133)
    at renderWithHooks (node_modules/react-d…evelopment.js:16260)
    at mountIndeterminateComponent (node_modules/react-d…evelopment.js:18794)
    at beginWork$1 (node_modules/react-d…evelopment.js:20162)
    at HTMLUnknownElement.callCallback (node_modules/react-d….development.js:336)
    at Object.invokeGuardedCallbackDev (node_modules/react-d….development.js:385)
/home/okdistribute/n….development.js:530 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 a useEffect cleanup function.
    in MapFilter (created by Transition)
    in div (created by styled.div)
    in styled.div (created by Transition)
    in Transition (created by TabPanel)
    in TabPanel (created by Home)
    in div (created by styled.div)
    in styled.div (created by Home)
    in div (created by styled.div)
    in styled.div (created by Home)
    in Home (created by App)
    in IntlProvider (created by App)
    in ThemeProvider (created by App)
    in StylesProvider (created by App)
    in App
gmaclennan commented 4 years ago

This is caused by having two copies of react. Most likely from using npm link locally? You need to symlink the react modules between the two modules you are linking. It’s a pain. No workaround other than manual sym link (that gets removed on npm install) or setting up mono repo.

On 28 Jan 2020, at 19:08, Karissa McKelvey notifications@github.com wrote:



Today, got this error on my branch https://github.com/digidem/react-mapfilter/pull/98 after fixing issues on v3. I don't know enough about hooks to debug this right now. @gmaclennan https://github.com/gmaclennan do you know why this is happening?

/home/okdistribute/n…development.js:1590 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem. at resolveDispatcher (/home/okdistribute/n…development.js:1590) at Object.useMemo (/home/okdistribute/n…development.js:1642) at WrappedMapView (/home/okdistribute/n…s/ViewWrapper.js:88) at renderWithHooks (node_modules/react-d…evelopment.js:16260) at mountIndeterminateComponent (node_modules/react-d…evelopment.js:18794) at beginWork$1 (node_modules/react-d…evelopment.js:20162) at HTMLUnknownElement.callCallback (node_modules/react-d….development.js:336) at Object.invokeGuardedCallbackDev (node_modules/react-d….development.js:385) at invokeGuardedCallback (node_modules/react-d….development.js:440) at beginWork$$1 (node_modules/react-d…evelopment.js:25780) /home/okdistribute/n…evelopment.js:21843 The above error occurred in the component: in FilterPanel (created by LeftPanel) in div (created by LeftPanel) in LeftPanel (created by MapFilter) in div (created by MapFilter) in MapFilter (created by Transition) in div (created by styled.div) in styled.div (created by Transition) in Transition (created by TabPanel) in TabPanel (created by Home) in div (created by styled.div) in styled.div (created by Home) in div (created by styled.div) in styled.div (created by Home) in Home (created by App) in IntlProvider (created by App) in ThemeProvider (created by App) in StylesProvider (created by App) in App

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. /home/okdistribute/n…timber/index.js:118 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem. at resolveDispatcher (/home/okdistribute/n…development.js:1590) at Object.useContext (/home/okdistribute/n…development.js:1598) at useTheme (/home/okdistribute/n…heme/useTheme.js:15) at /home/okdistribute/n…s/makeStyles.js:242 at FilterPanel (/home/okdistribute/n…/FilterPanel.js:133) at renderWithHooks (node_modules/react-d…evelopment.js:16260) at mountIndeterminateComponent (node_modules/react-d…evelopment.js:18794) at beginWork$1 (node_modules/react-d…evelopment.js:20162) at HTMLUnknownElement.callCallback (node_modules/react-d….development.js:336) at Object.invokeGuardedCallbackDev (node_modules/react-d….development.js:385) /home/okdistribute/n….development.js:530 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 a useEffect cleanup function. in MapFilter (created by Transition) in div (created by styled.div) in styled.div (created by Transition) in Transition (created by TabPanel) in TabPanel (created by Home) in div (created by styled.div) in styled.div (created by Home) in div (created by styled.div) in styled.div (created by Home) in Home (created by App) in IntlProvider (created by App) in ThemeProvider (created by App) in StylesProvider (created by App) in App

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/digidem/react-mapfilter/issues/99?email_source=notifications&email_token=AACG5GMCUYZQIL7TY43XDI3RAB7B3A5CNFSM4KMXVO32YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4IJKDYQQ, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACG5GLF27XASET5WPQBBK3RAB7B3ANCNFSM4KMXVO3Q .

okdistribute commented 4 years ago

ok thanks!