Theme-ui: Invalid hook call: maybe issue with HOC?

Created on 12 Aug 2019 · 4Comments · Source: system-ui/theme-ui

Hello, I'm trying to use theme-ui along with creative Tim's material kit.
It uses a lot of HOC's which I think may be the issue... would that make sense?

I am getting the following error when I add gatsby-plugin-theme-ui or even try to wrap a themeprovider around any element. I tried wrapping a page then to narrow it down wrapping a simple

and keep getting this.

Thanks in advance for any help :)

×
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.

Source

K-Kit

Most helpful comment

For others ending up here.
The result of npm ls react was:

├── [email protected] 
└─┬ [email protected]
  └── [email protected]

deleting node_modules and reinstalling won't work by itself
must also resolve in package-lock.json
(was a new project for me so I just deleted package-lock.json
before npm installing again)
The result of npm ls react is now:

├── [email protected] 
└─┬ [email protected]
  └── [email protected]  deduped

where the second react is deduped, which resolves this
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

gitnix on 13 Aug 2019

🎉2 👍1

All 4 comments

woops reinstall node modules fixed

K-Kit on 12 Aug 2019

👍1

For others ending up here.
The result of npm ls react was:

├── [email protected] 
└─┬ [email protected]
  └── [email protected]

├── [email protected] 
└─┬ [email protected]
  └── [email protected]  deduped

where the second react is deduped, which resolves this
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

gitnix on 13 Aug 2019

🎉2 👍1

running into this right now but i dont see theme-ui mentioned at all.

├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected]  deduped
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected]  deduped
│ └── [email protected]  deduped
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └─┬ @storybook/[email protected]
│     └── [email protected]  deduped
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]