Uncaught Invariant Violation: Hooks can only be

react.development.js:88 Uncaught Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
    at invariant (http://localhost:4000/main.a6b75653f0309809b820.js:52363:15)
    at resolveDispatcher (http://localhost:4000/main.a6b75653f0309809b820.js:53711:28)
    at useState (http://localhost:4000/main.a6b75653f0309809b820.js:53736:20)
    at Tippy (http://localhost:4000/main.a6b75653f0309809b820.js:504:73)
    at renderWithHooks (http://localhost:4000/main.a6b75653f0309809b820.js:176693:18)
    at mountIndeterminateComponent (http://localhost:4000/main.a6b75653f0309809b820.js:178670:13)
    at beginWork (http://localhost:4000/main.a6b75653f0309809b820.js:179275:16)
    at performUnitOfWork (http://localhost:4000/main.a6b75653f0309809b820.js:182962:12)
    at workLoop (http://localhost:4000/main.a6b75653f0309809b820.js:183002:24)
    at HTMLUnknownElement.callCallback (http://localhost:4000/main.a6b75653f0309809b820.js:164003:14)
invariant @ react.development.js:88
resolveDispatcher @ react.development.js:1436
useState @ react.development.js:1461
Tippy @ Tippy.js:36
renderWithHooks @ react-dom.development.js:12839
mountIndeterminateComponent @ react-dom.development.js:14816
beginWork @ react-dom.development.js:15421
performUnitOfWork @ react-dom.development.js:19108
workLoop @ react-dom.development.js:19148
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
replayUnitOfWork @ react-dom.development.js:18374
renderRoot @ react-dom.development.js:19264
performWorkOnRoot @ react-dom.development.js:20138
performWork @ react-dom.development.js:20050
performSyncWork @ react-dom.development.js:20024
requestWork @ react-dom.development.js:19893
scheduleWork @ react-dom.development.js:19707
scheduleRootUpdate @ react-dom.development.js:20368
updateContainerAtExpirationTime @ react-dom.development.js:20396
updateContainer @ react-dom.development.js:20453
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20749
(anonymous) @ react-dom.development.js:20886
unbatchedUpdates @ react-dom.development.js:20255
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20882
render @ react-dom.development.js:20951
(anonymous) @ index.tsx:5
./src/app/index.tsx @ index.tsx:13
__webpack_require__ @ bootstrap:63
0 @ view-preferences-service.ts:100
__webpack_require__ @ bootstrap:63
(anonymous) @ bootstrap:195
(anonymous) @ bootstrap:195
Show 4 more frames
3react-dom.development.js:16913 The above error occurred in the <Tippy> component:
    in Tippy
    in ForwardRef(TippyWrapper)
    in div
    in div
    in div
    in NavBar
    in div
    in Layout (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in Router (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.
logCapturedError @ react-dom.development.js:16913
logError @ react-dom.development.js:16949
update.callback @ react-dom.development.js:17861
callCallback @ react-dom.development.js:16229
commitUpdateEffects @ react-dom.development.js:16268
commitUpdateQueue @ react-dom.development.js:16259
commitLifeCycles @ react-dom.development.js:17179
commitAllLifeCycles @ react-dom.development.js:18532
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18744
(anonymous) @ react-dom.development.js:20214
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:20213
performWorkOnRoot @ react-dom.development.js:20142
performWork @ react-dom.development.js:20050
performSyncWork @ react-dom.development.js:20024
requestWork @ react-dom.development.js:19893
scheduleWork @ react-dom.development.js:19707
scheduleRootUpdate @ react-dom.development.js:20368
updateContainerAtExpirationTime @ react-dom.development.js:20396
updateContainer @ react-dom.development.js:20453
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20749
(anonymous) @ react-dom.development.js:20886
unbatchedUpdates @ react-dom.development.js:20255
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20882
render @ react-dom.development.js:20951
(anonymous) @ index.tsx:5
./src/app/index.tsx @ index.tsx:13
__webpack_require__ @ bootstrap:63
0 @ view-preferences-service.ts:100
__webpack_require__ @ bootstrap:63
(anonymous) @ bootstrap:195
(anonymous) @ bootstrap:195
Show 5 more frames
react.development.js:88 Uncaught Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
    at invariant (http://localhost:4000/main.a6b75653f0309809b820.js:52363:15)
    at resolveDispatcher (http://localhost:4000/main.a6b75653f0309809b820.js:53711:28)
    at useState (http://localhost:4000/main.a6b75653f0309809b820.js:53736:20)
    at Tippy (http://localhost:4000/main.a6b75653f0309809b820.js:504:73)
    at renderWithHooks (http://localhost:4000/main.a6b75653f0309809b820.js:176693:18)
    at mountIndeterminateComponent (http://localhost:4000/main.a6b75653f0309809b820.js:178670:13)
    at beginWork (http://localhost:4000/main.a6b75653f0309809b820.js:179275:16)
    at performUnitOfWork (http://localhost:4000/main.a6b75653f0309809b820.js:182962:12)
    at workLoop (http://localhost:4000/main.a6b75653f0309809b820.js:183002:24)
    at renderRoot (http://localhost:4000/main.a6b75653f0309809b820.js:183085:7)
invariant @ react.development.js:88
resolveDispatcher @ react.development.js:1436
useState @ react.development.js:1461
Tippy @ Tippy.js:36
renderWithHooks @ react-dom.development.js:12839
mountIndeterminateComponent @ react-dom.development.js:14816
beginWork @ react-dom.development.js:15421
performUnitOfWork @ react-dom.development.js:19108
workLoop @ react-dom.development.js:19148
renderRoot @ react-dom.development.js:19231
performWorkOnRoot @ react-dom.development.js:20138
performWork @ react-dom.development.js:20050
performSyncWork @ react-dom.development.js:20024
requestWork @ react-dom.development.js:19893
scheduleWork @ react-dom.development.js:19707
scheduleRootUpdate @ react-dom.development.js:20368
updateContainerAtExpirationTime @ react-dom.development.js:20396
updateContainer @ react-dom.development.js:20453
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20749
(anonymous) @ react-dom.development.js:20886
unbatchedUpdates @ react-dom.development.js:20255
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20882
render @ react-dom.development.js:20951
(anonymous) @ index.tsx:5
./src/app/index.tsx @ index.tsx:13
__webpack_require__ @ bootstrap:63
0 @ view-preferences-service.ts:100
__webpack_require__ @ bootstrap:63
(anonymous) @ bootstrap:195
(anonymous) @ bootstrap:195

[wbharding]

Been struggling against this for most of my morning. In my case I’ve ascertained that the order in which packs are loaded seems to trigger this. If the component with tippy isn’t the first pack tag that gets loaded on my page, then I get this error; if the tippy-bearing component is the first pack tag, then it works fine. Ugh.

Update: after 10 more hours spent futilely attempting to debug this, I ended up switching to react-tippy, which has Just Worked. At first I thought I was getting this exception because I’ve got a bunch of pack entry points that import their own versions of React, but even after implementing code splitting and confirming that no packs were importing redundant JS, this exception persisted. Since it’s fairly impossible to follow the React logic that begets this exception, there are no apparent options to diagnose what brings this about. If any other poor people end up suffering through debugging this and decide to give up as I eventually did, you can keep most of your existing code intact switching to react-tippy by using

import React from "react"
import { Tooltip } from 'react-tippy';
import 'react-tippy/dist/tippy.css'

function withDefaultTippyOptions(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        html: props.html || props.content,
      }
    }

    render() {
      const propsWithHtml = { ...this.props, html: this.state.html };
      return <WrappedComponent {...propsWithHtml} />
    }
  }
}
const Tippy = withDefaultTippyOptions(Tooltip);
export default Tippy;

Abandoning the library surely wasn’t the solution I would’ve preferred, but with WebpackerReact and multiple packs that try to use Tippy, there were no paths to remediate this that I could uncover across 15 hours of debugging. 😬

[atomiks]

@EmmaRamirez

Post some code, we might be able to solve this for others who experience this issue as well ✌️

Regardless your issue is probably answered here: https://reactjs.org/warnings/invalid-hook-call-warning.html