Deprecated: findDOMNode Used in OverlayTrigger After React 18 Upgrade

[adamstankiewicz]

Upon upgrading openedx/frontend-app-learner-portal-enterprise to React 18, new deprecation warnings related to findDOMNode are seen when running in StrictMode. See below for stack trace:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of RefHolder which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node Error Component Stack
    at button (<anonymous>)
    at _c (index.tsx:46:3)
    at RefHolder (OverlayTrigger.js:17:1)
    at OverlayTrigger (OverlayTrigger.js:57:1)
    at OverlayTrigger (index.tsx:41:14)
    at IconButtonWithTooltip (index.tsx:161:3)
    at div (<anonymous>)
    at _c (index.jsx:11:3)
    at div (<anonymous>)
    at div (<anonymous>)
    at div (<anonymous>)
    at _c (index.jsx:11:3)
    at div (<anonymous>)
    at div (<anonymous>)
    at BaseCourseCard (BaseCourseCard.jsx:125:3)

It appears the findDOMNode is coming from react-bootstrap's OverlayTrigger component here.

[brian-smith-tcril]

Did a tiny bit of digging - safeFindDOMNode comes from https://github.com/react-bootstrap/react-overlays which is deprecated

HEADS UP! this repo is deprecated and not receiving any more updates.

Don't worry though, that's because it's been succeeded by https://github.com/react-restart/ui which is built off of react-overlays by the same team.

[adamstankiewicz]

And a tiny bit more digging... it looks like even if we were to upgrade to the latest react-bootstrap@2 (Bootstrap 5, which we're largely blocked on at the moment anyways), it still uses ReactDOM.findDOMNode within safeFindDOMNode, seemingly used directly within react-bootstrap (not even the react-overlays mentioned above): https://github.com/react-bootstrap/react-bootstrap/blob/7cb1fc06bfe93f98646369bf9270ec1abbf532d3/src/safeFindDOMNode.ts#L7

When switching to the v2 branch (not the latest v2 tag), there's the following:

// TODO: Remove in next major.
// eslint-disable-next-line react/no-find-dom-node
return ReactDOM.findDOMNode(componentOrElement);

Seems that disabled ESLint rule hasn't been officially released, if not in the latest v2.x tag I guess 🤷‍♂

[brian-smith-tcril]

As of writing, the latest v2 tag is v2.10.9 which was released on 2025-01-29.

The eslint-disable was added in react-bootstrap/react-bootstrap#6894, which landed on 2025-02-06.

My guess is 2.10.10 will get tagged before too long and we can update our package.json to ^2.10.10 when that happens.

[adamstankiewicz]

we can update our package.json to ^2.10.10 when that happens.

Unfortunately, I don't think we can do that until we can fully upgrade to Bootstrap 5, though, as react-bootstrap v2 requires Bootstrap 5; Paragon is currently running Bootstrap 4 and react-bootstrap v1; I believe it's still a bit questionable whether we will/want to upgrade to Bootstrap 5. We can revisit this question in Paragon Working Group meeting.