Warning: findDOMNode is deprecated in StrictMode. #5075

freemaths · 2020-03-27T09:25:35Z

Error generated when using
Warning: findDOMNode is deprecated in StrictMode.

Tested with latest 1.0.0 release of recat-bootstrap

From what I can see this is a known issue with react-bootstrap but I am not clear on when it will be fixed or any workarounds in the meantime. Console errors are not helpful when developing. Turning off strict mode compromises other development.

see: https://reactjs.org/docs/strict-mode.html

mxschmitt · 2020-03-27T11:27:56Z

react-bootstrap/src/Overlay.js

Lines 114 to 121 in d983ec8

    
           function wrapRefs(props, arrowProps) { 
        
             const { ref } = props; 
        
             const { ref: aRef } = arrowProps; 
        
             props.ref = ref.__wrapped || (ref.__wrapped = (r) => ref(findDOMNode(r))); 
        
             arrowProps.ref = 
        
               aRef.__wrapped || (aRef.__wrapped = (r) => aRef(findDOMNode(r))); 
        
           }

react-bootstrap/src/OverlayTrigger.js

Lines 121 to 124 in d983ec8

    
           const getTarget = useCallback( 
        
             () => ReactDOM.findDOMNode(triggerNodeRef.current), 
        
             [], 
        
           );

seems like at these two places, hmmm. We already had this issue come up a few month ago if I remember correctly.

freemaths · 2020-03-27T11:31:54Z

Yes, many thanks. I found some references earlier but all were closed and I couldn't see any clear instructions on work-arounds or when it might be fixed. I think it applies to some other components too.

jquense · 2020-03-27T14:16:48Z

arg, we should have removed this probably, like we did for dropdowns.

What we can do tho is only call findDOMNode if required. that way users can avoid it themselves by not using class component refs

freemaths · 2020-03-27T19:56:59Z

Thanks. Happy to test any updated version.

avxkim · 2020-03-30T10:56:19Z

Just faced the same issue on a clean CRA app with react-bootstrap@1.0.0

jquense · 2020-03-30T14:13:49Z

PR's welcome if folks wanna get it fixed quicker, we will get to it but it's lower on the priority list since it's an opt in warning

Korywon · 2020-04-01T12:17:39Z

I encountered this warning as well when using the navbar collapse. Here's the stacktrace:

    in div (created by Context.Consumer)
    in Transition (created by Collapse)
    in Collapse (created by Context.Consumer)
    in NavbarCollapse (at navbar-menu.component.js:18)
    in nav (created by Navbar)
    in Navbar (at navbar-menu.component.js:13)
    in NavbarMenu (at App.js:18)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:17)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

Haven't found the reference in code just yet.

ratchapol-an · 2020-04-02T14:50:40Z

Modal also has this issue too.

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Modal which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
in div (created by Modal)
in Transition (created by Fade)
in Fade (created by BackdropTransition)
in BackdropTransition (created by Modal)
in Modal (created by ForwardRef)
in ForwardRef (created by Modal)
in Modal (created by Bootstrap(Modal))
in Bootstrap(Modal) (at NewCustomerModal.tsx:13)
in NewCustomerModal (at Customers.tsx:27)
in div (at Customers.tsx:18)
in Customers (at withMainLayout.tsx:26)
in div (created by Container)
in Container (at withMainLayout.tsx:25)
in main (at withMainLayout.tsx:23)
in div (at withMainLayout.tsx:21)
in withMainLayout(Component) (created by Context.Consumer)
in Route (at Routes.tsx:11)
in Switch (at Routes.tsx:9)
in Router (created by BrowserRouter)
in BrowserRouter (at Routes.tsx:8)
in Routes (at App.tsx:7)
in App (at src/index.tsx:11)
in StrictMode (at src/index.tsx:10)

HunteRoi · 2020-04-04T18:13:35Z

Just got the issue with Accordion.Collapse :

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in div (created by AccordionCollapse)
    in Transition (created by Collapse)
    in Collapse (created by AccordionCollapse)
    in AccordionCollapse (at Contributor/index.tsx:30)
    in div (created by ForwardRef)
    in ForwardRef (at Contributor/index.tsx:26)
    in div (at Contributor/index.tsx:25)
    in Contributor (at App/index.tsx:33)
    in div (at PageLayout/index.tsx:18)
    in main (at PageLayout/index.tsx:17)
    in div (at PageLayout/index.tsx:12)
    in PageLayout (at App/index.tsx:32)
    in Route (at App/index.tsx:31)
    in Switch (at App/index.tsx:14)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App/index.tsx:13)
    in App (at src/index.tsx:10)
    in StrictMode (at src/index.tsx:9)

kheide · 2020-04-07T10:11:31Z

Tab.Pane also has the same issue

HunteRoi · 2020-04-07T22:45:37Z

I have quickly checked the repository to find all findDOMNode references and here are the places where it is currently used and/or referenced as documentation :

I unfortunately don't have the required knowledge of the library to make the changes myself and create a pull request. I hope that somebody will be able to fix it.

jquense · 2020-04-08T13:20:56Z

I'm in the process of fixing this upstream with: https://github.com/react-bootstrap/react-overlays/pull/794/files#diff-97a43659c6311e819ce665f4a3291f58 which we can use here as well once it's merged and upgraded

ajayala · 2020-04-19T02:36:41Z

Some of the issues came from a dependency, react-transition-group. It has to be fixed from this side. Here's the offending code:

https://github.com/reactjs/react-transition-group/blob/master/src/Transition.js

If you don't need the transition, as a temporary fix, you can set transition attribute to false.

<Tabs transition={false} > ... </Tabs>

HunteRoi · 2020-04-19T11:41:59Z

It looks like they already know about the issue in this particular library as well : #429

martinKindall · 2020-04-19T20:01:45Z

Had this issue using <Modal ../>

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
in div (created by Modal)
in Transition (created by Fade)
in Fade (created by BackdropTransition)
in BackdropTransition (created by Modal)
in Modal (created by ForwardRef)
in ForwardRef (created by Modal)
in Modal (created by Bootstrap(Modal))
in Bootstrap(Modal) (at FilterForm.tsx:13)
in FilterForm (at Searcher.tsx:29)
in Searcher (at BottomBar.tsx:80)
in Route (at BottomBar.tsx:79)
in Switch (at BottomBar.tsx:68)
in div (at BottomBar.tsx:26)
in BottomBar (at App.tsx:9)
in Router (created by BrowserRouter)
in BrowserRouter (at App.tsx:8)
in App (at src/index.tsx:9)
in StrictMode (at src/index.tsx:8)

"bootstrap": "^4.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0",

devcrp · 2020-04-23T13:49:29Z

Thanks @jquense ! Upgrading to the fresh 1.0.1 version fixed it for Modals, although it only works if animated is set to false.

jquense · 2020-04-23T15:27:13Z

Yes we are waiting for react transition group to update as well

mabsystems · 2020-04-24T14:07:49Z

v.1.0.1: "Warning: findDOMNode is deprecated" still actual for Modal

envious · 2020-04-24T15:54:49Z

Also facing this issue.

sylwiasuwalska · 2020-04-24T17:59:53Z

Modal with animation set to false.
Updated to v 1.0.1.

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Modal which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
in div (created by Modal)
in Modal (created by ForwardRef)
in ForwardRef (created by Modal)
in Modal (created by Bootstrap(Modal))
in Bootstrap(Modal) (at Options.js:25)
in Options (at Grid.js:152)
in div (created by Col)
in Col (at Grid.js:151)
in div (created by Row)
in Row (at Grid.js:146)
in Grid (at App.js:24)
in div (created by Container)
in Container (at App.js:8)
in App (at src/index.js:10)
in StrictMode (at src/index.js:9)

carliey · 2020-05-02T17:07:09Z

Having the same issue with material-ui dialog

devcrp · 2020-05-04T10:45:10Z

I must be doing something different, because creating the modal with animation={false} doesn't raise the warning for me, and I got it if I set it to true.

<Modal
show={showMultiple}
onHide={() => setShowMultiple(false)}
animation={false}
>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
Select
</Modal.Footer>

garycyyeung · 2020-05-05T05:50:09Z

I had the same messages before when I used Modal or Alert

The following is the solution for fixing the issue:

For Modal, add animation={false} within the tag
For Alert, add transition={null} within the tag

wolfgang-reutz · 2020-05-13T13:36:03Z

I have the error with Accordion when I toggle a Accordion.Collapse element.
Tried both animation and transition parameter with false and null but no luck.

Any hints on how to fix this problem for Accordion until react-transition fixes it?

using react-bootstrap@1.0.1

kunuit · 2020-05-15T08:28:25Z

So sad, my eyes don't like it

```

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by Transition)
in Transition (created by ForwardRef(Grow))
in ForwardRef(Grow) (created by TrapFocus)
in TrapFocus (created by ForwardRef(Modal))
in div (created by ForwardRef(Modal))
in ForwardRef(Portal) (created by ForwardRef(Modal))
in ForwardRef(Modal) (created by ForwardRef(Popover))
in ForwardRef(Popover) (created by WithStyles(ForwardRef(Popover)))
in WithStyles(ForwardRef(Popover)) (created by ForwardRef(Menu))
in ForwardRef(Menu) (created by WithStyles(ForwardRef(Menu)))
in WithStyles(ForwardRef(Menu)) (at Header/index.js:42)
in div (at Header/index.js:59)
in Header (created by WithStyles(Header))
in WithStyles(Header) (at Dashboard/index.js:13)
in div (at Dashboard/index.js:12)
in Dashboard (created by WithStyles(Dashboard))
in WithStyles(Dashboard) (at AdminLayoutRoute/index.js:18)
in Route (at AdminLayoutRoute/index.js:14)
in AdminLayoutRote (created by WithStyles(AdminLayoutRote))
in WithStyles(AdminLayoutRote) (at App/index.js:27)
in Switch (at App/index.js:49)
in ThemeProvider (at App/index.js:44)
in Router (created by BrowserRouter)
in BrowserRouter (at App/index.js:43)
in Provider (at App/index.js:42)
in App (created by WithStyles(App))
in WithStyles(App) (at src/index.js:9)
in StrictMode (at src/index.js:8)
console. @ index.js:1
r @ react_devtools_backend.js:6
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
findHostInstanceWithWarning @ react-dom.development.js:24306
findDOMNode @ react-dom.development.js:24804
performEnter @ Transition.js:245
updateStatus @ Transition.js:228
componentDidUpdate @ Transition.js:192
commitLifeCycles @ react-dom.development.js:19835
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

jquense · 2020-05-15T13:17:45Z

Folks please stop posting the same example of react-transition-group causing an error, its not helpful to the discussion. We know why these occur, If someone wants to upgrade RTG to the latest and migrate to the nodeRef API that will speed this along, otherwise don't run in StrictMode if you don't want to see the errors thanks!

kyletsang · 2021-05-28T04:47:05Z

Fixed in v2 alpha

jquense mentioned this issue Apr 20, 2020

fix: use upstream types and fix Overlay, Modal, Tooltip, and Popover … #5124

Merged

react-bootstrap locked and limited conversation to collaborators May 15, 2020

kyletsang linked a pull request Mar 3, 2021 that will close this issue

feat!: add StrictMode support #5687

Merged

kyletsang closed this as completed May 28, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Warning: findDOMNode is deprecated in StrictMode. #5075

Warning: findDOMNode is deprecated in StrictMode. #5075

freemaths commented Mar 27, 2020

mxschmitt commented Mar 27, 2020

freemaths commented Mar 27, 2020 •

edited

jquense commented Mar 27, 2020

freemaths commented Mar 27, 2020

avxkim commented Mar 30, 2020

jquense commented Mar 30, 2020

Korywon commented Apr 1, 2020

ratchapol-an commented Apr 2, 2020

HunteRoi commented Apr 4, 2020

kheide commented Apr 7, 2020

HunteRoi commented Apr 7, 2020 •

edited

jquense commented Apr 8, 2020

ajayala commented Apr 19, 2020 •

edited

HunteRoi commented Apr 19, 2020

martinKindall commented Apr 19, 2020 •

edited

devcrp commented Apr 23, 2020 •

edited

jquense commented Apr 23, 2020

mabsystems commented Apr 24, 2020 •

edited

envious commented Apr 24, 2020

sylwiasuwalska commented Apr 24, 2020

carliey commented May 2, 2020

devcrp commented May 4, 2020 •

edited

garycyyeung commented May 5, 2020 •

edited

wolfgang-reutz commented May 13, 2020

kunuit commented May 15, 2020

jquense commented May 15, 2020

kyletsang commented May 28, 2021

Warning: findDOMNode is deprecated in StrictMode. #5075

Warning: findDOMNode is deprecated in StrictMode. #5075

Comments

freemaths commented Mar 27, 2020

mxschmitt commented Mar 27, 2020

freemaths commented Mar 27, 2020 • edited

jquense commented Mar 27, 2020

freemaths commented Mar 27, 2020

avxkim commented Mar 30, 2020

jquense commented Mar 30, 2020

Korywon commented Apr 1, 2020

ratchapol-an commented Apr 2, 2020

HunteRoi commented Apr 4, 2020

kheide commented Apr 7, 2020

HunteRoi commented Apr 7, 2020 • edited

jquense commented Apr 8, 2020

ajayala commented Apr 19, 2020 • edited

HunteRoi commented Apr 19, 2020

martinKindall commented Apr 19, 2020 • edited

devcrp commented Apr 23, 2020 • edited

jquense commented Apr 23, 2020

mabsystems commented Apr 24, 2020 • edited

envious commented Apr 24, 2020

sylwiasuwalska commented Apr 24, 2020

carliey commented May 2, 2020

devcrp commented May 4, 2020 • edited

garycyyeung commented May 5, 2020 • edited

wolfgang-reutz commented May 13, 2020

kunuit commented May 15, 2020

```

jquense commented May 15, 2020

kyletsang commented May 28, 2021

freemaths commented Mar 27, 2020 •

edited

HunteRoi commented Apr 7, 2020 •

edited

ajayala commented Apr 19, 2020 •

edited

martinKindall commented Apr 19, 2020 •

edited

devcrp commented Apr 23, 2020 •

edited

mabsystems commented Apr 24, 2020 •

edited

devcrp commented May 4, 2020 •

edited

garycyyeung commented May 5, 2020 •

edited