React-admin: Deprecated findDOMNode warning in StrictMode - originating from react-transition-group

[bard]

What you were expecting:

Code from the tutorial at https://marmelab.com/react-admin/Tutorial.html to run cleanly.

What happened instead:

Deprecation warning is printed to the console:

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

Steps to reproduce:

• Follow the tutorial up to and including "Mapping API Endpoints With Resources"
• Cause a CSS transition, e.g. by hovering the "Users" link in the sidebar

Other information:

The warning comes from the react-transition-group version imported by ra-ui-materialui (^2.2.1, currently resolving to 2.9.0). Until recently, react-transition-group used findDOMNode, which is deprecated from React 16.6.0.

The bug in react-transition-group was fixed recently (https://github.com/reactjs/react-transition-group/issues/429) but not yet released. It would be nice if ra-ui-materialui could depend on react-transition-group@4 so when the fix is released, it will be picked up automatically. @material-ui/core already depends on [email protected] internally so I believe there would not be any issue.

Environment

• React-admin version: 3.3.2
• Last version that did not exhibit the issue (if applicable):
• React version: 16.13.1
• Browser: Chromium 80.0.3987.149
• Stack trace (in case of a JS error):

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 Transition)
    in Transition (created by ForwardRef(Grow))
    in ForwardRef(Grow) (created by ForwardRef(Popper))
    in div (created by ForwardRef(Popper))
    in ForwardRef(Portal) (created by ForwardRef(Popper))
    in ForwardRef(Popper) (created by ForwardRef(Tooltip))
    in ForwardRef(Tooltip) (created by WithStyles(ForwardRef(Tooltip)))
    in WithStyles(ForwardRef(Tooltip)) (created by DatagridHeaderCell)
    in th (created by ForwardRef(TableCell))
    in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))
    in WithStyles(ForwardRef(TableCell)) (created by DatagridHeaderCell)
    in DatagridHeaderCell (created by shouldUpdate(DatagridHeaderCell))
    in shouldUpdate(DatagridHeaderCell) (created by Datagrid)
    in tr (created by ForwardRef(TableRow))
    in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
    in WithStyles(ForwardRef(TableRow)) (created by Datagrid)
    in thead (created by ForwardRef(TableHead))
    in ForwardRef(TableHead) (created by WithStyles(ForwardRef(TableHead)))
    in WithStyles(ForwardRef(TableHead)) (created by Datagrid)
    in table (created by ForwardRef(Table))
    in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
    in WithStyles(ForwardRef(Table)) (created by Datagrid)
    in Datagrid (created by component)
    in component
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by ListView)
    in div (created by ListView)
    in div (created by ListView)
    in ListView (created by ListViewGuesser)
    in ListViewGuesser (created by ListGuesser)
    in ListGuesser (created by WithPermissions)
    in WithPermissions (created by Context.Consumer)
    in Route (created by ResourceRoutes)
    in Switch (created by ResourceRoutes)
    in ResourceRoutes (created by Resource)
    in Resource (at App.tsx:8)
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Context.Consumer)
    in div (created by Layout)
    in main (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Context.Consumer)
    in withRouter(WithStyles(Layout)) (created by ConnectFunction)
    in ConnectFunction (created by LayoutWithTheme)
    in ThemeProvider (created by LayoutWithTheme)
    in LayoutWithTheme (created by Context.Consumer)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by Context.Consumer)
    in Route (created by CoreAdminUI)
    in Switch (created by CoreAdminUI)
    in CoreAdminUI (created by AdminUI)
    in AdminUI (created by Admin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (created by CoreAdminContext)
    in TranslationProvider (created by CoreAdminContext)
    in Provider (created by CoreAdminContext)
    in CoreAdminContext (created by AdminContext)
    in AdminContext (created by Admin)
    in Admin (at App.tsx:7)
    in App (at src/index.tsx:9)
    in StrictMode (at src/index.tsx:8)

[fzaninotto]

I'll update the dependency, but this won't fix the bug, which requires a new release by react-transition-group. At least, it will remove a duplicate package between us and material-ui.

[kaizenlabs]

Hi, this is still happening and "react-transition-group" is at "^4.4.1" for package 'ra-ui-materialui'

[wedi]

I can confirm this is still an issue and should be reopened.

According to a comment on the issue over at react-transition-group this needs a client side code change.

It's not a workaround, you have to explicitly assign a node to react-transition-group, otherwise it cannot avoid using findDOMNode. Read the official explanation for deprecating findDOMNode to understand why.

We would've loved to solve this without people having to update their code, but it's just not possible.

–– silvenon (https://github.com/reactjs/react-transition-group/issues/429#issuecomment-640137665)