Deprecated findDOMNode warning in StrictMode - originating from react-transition-group #4577

bard · 2020-03-24T18:04:23Z

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 (reactjs/react-transition-group#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 react-transition-group@4.3.0 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)

The text was updated successfully, but these errors were encountered:

fzaninotto · 2020-03-29T21:43:38Z

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.

Closes #4577

kaizenlabs · 2020-12-23T17:40:00Z

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

wedi · 2021-01-21T19:59:59Z

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 (reactjs/react-transition-group#429 (comment))

rockallite · 2021-02-02T02:29:00Z

I'm still having this issue with react-admin@3.12.0, ra-ui-materialui@3.12.0 and react-transition-group@4.4.1.

Console stack trace:

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://reactjs.org/link/strict-mode-find-node
    at div
    at Transition (http://example.localmachine:4000/static/js/0.chunk.js:189601:30)
    at Grow (http://example.localmachine:4000/static/js/0.chunk.js:13403:24)
    at div
    at Portal (http://example.localmachine:4000/static/js/0.chunk.js:21748:24)
    at Popper (http://example.localmachine:4000/static/js/0.chunk.js:21427:24)
    at Tooltip (http://example.localmachine:4000/static/js/0.chunk.js:32019:28)
    at WithStyles(ForwardRef(Tooltip)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at th
    at TableCell (http://example.localmachine:4000/static/js/0.chunk.js:28983:28)
    at WithStyles(ForwardRef(TableCell)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at DatagridHeaderCell (http://example.localmachine:4000/static/js/0.chunk.js:147653:25)
    at tr
    at TableRow (http://example.localmachine:4000/static/js/0.chunk.js:29944:23)
    at WithStyles(ForwardRef(TableRow)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at thead
    at TableHead (http://example.localmachine:4000/static/js/0.chunk.js:29344:23)
    at WithStyles(ForwardRef(TableHead)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at table
    at Table (http://example.localmachine:4000/static/js/0.chunk.js:28602:23)
    at WithStyles(ForwardRef(Table)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at http://example.localmachine:4000/static/js/0.chunk.js:147190:83
    at div
    at Paper (http://example.localmachine:4000/static/js/0.chunk.js:20662:23)
    at WithStyles(ForwardRef(Paper)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at Card (http://example.localmachine:4000/static/js/0.chunk.js:5518:23)
    at WithStyles(ForwardRef(Card)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at div
    at div
    at ListView (http://example.localmachine:4000/static/js/0.chunk.js:146342:23)
    at ListContextProvider (http://example.localmachine:4000/static/js/0.chunk.js:104194:18)
    at List (http://example.localmachine:4000/static/js/0.chunk.js:145925:79)
    at UserList
    at WithPermissions (http://example.localmachine:4000/static/js/0.chunk.js:102560:23)
    at Route (http://example.localmachine:4000/static/js/0.chunk.js:188253:29)
    at Switch (http://example.localmachine:4000/static/js/0.chunk.js:188455:29)
    at ResourceContextProvider (http://example.localmachine:4000/static/js/0.chunk.js:110869:21)
    at ResourceRoutes (http://example.localmachine:4000/static/js/0.chunk.js:110735:17)
    at Resource (http://example.localmachine:4000/static/js/0.chunk.js:110807:15)
    at Route (http://example.localmachine:4000/static/js/0.chunk.js:188253:29)
    at Switch (http://example.localmachine:4000/static/js/0.chunk.js:188455:29)
    at RoutesWithLayout (http://example.localmachine:4000/static/js/0.chunk.js:110913:21)
    at div
    at main
    at div
    at div
    at LayoutWithoutTheme (http://example.localmachine:4000/static/js/0.chunk.js:143767:24)
    at WithStyles(LayoutWithoutTheme) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at withRouter(WithStyles(LayoutWithoutTheme)) (http://example.localmachine:4000/static/js/0.chunk.js:188510:37)
    at Connect(withRouter(WithStyles(LayoutWithoutTheme))) (http://example.localmachine:4000/static/js/0.chunk.js:185411:75)
    at ThemeProvider (http://example.localmachine:4000/static/js/0.chunk.js:40559:24)
    at Layout (http://example.localmachine:4000/static/js/0.chunk.js:143885:26)
    at Route (http://example.localmachine:4000/static/js/0.chunk.js:188253:29)
    at Switch (http://example.localmachine:4000/static/js/0.chunk.js:188455:29)
    at div
    at CoreAdminRouter (http://example.localmachine:4000/static/js/0.chunk.js:110378:87)
    at Route (http://example.localmachine:4000/static/js/0.chunk.js:188253:29)
    at Switch (http://example.localmachine:4000/static/js/0.chunk.js:188455:29)
    at CoreAdminUI (http://example.localmachine:4000/static/js/0.chunk.js:110587:15)
    at AdminUI
    at Router (http://example.localmachine:4000/static/js/0.chunk.js:187888:30)
    at ConnectedRouter (http://example.localmachine:4000/static/js/0.chunk.js:63774:7)
    at ConnectedRouterWithContext (http://example.localmachine:4000/static/js/0.chunk.js:63879:25)
    at Connect(ConnectedRouterWithContext) (http://example.localmachine:4000/static/js/0.chunk.js:185411:75)
    at TranslationProvider (http://example.localmachine:4000/static/js/0.chunk.js:118568:28)
    at Provider (http://example.localmachine:4000/static/js/0.chunk.js:185124:20)
    at CoreAdminContext (http://example.localmachine:4000/static/js/0.chunk.js:110143:25)
    at AdminContext
    at Admin (http://example.localmachine:4000/static/js/0.chunk.js:150314:22)
    at App

herman-the-worm · 2021-03-03T18:18:21Z

Any timeline on this issue?

We are using react-admin for an admin panel for our client and want to ensure that this would go away at some point.

Is there any workaround at the moment?

@fzaninotto

yab94 · 2021-05-05T10:37:29Z

UP

fzaninotto · 2021-05-07T06:07:32Z

I can't reproduce the issue on master. Could you please paste a link to a fork of the simple example CodeSandbox reproducing the issue?

nmay231 · 2021-05-07T07:00:47Z

@fzaninotto I tried forking the sandbox, changing tsconfig.json, upgrading and downgrading react-admin and was also unsuccessful in reproducing the issue.

However, I'm still able to reproduce the issue in a fresh project locally. Here are my exact steps:

yarn create react-app react-admin-demo --template typescript
cd react-admin-demo
yarn add react-admin@^3.15.0 ra-data-json-server prop-types
Replace src/App.tsx with the following content:

import * as React from "react";
import { Admin, Resource, ListGuesser } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="users" list={ListGuesser} />
    </Admin>
);

export default App;

Start server yarn start
Important: Mouse over the hamburger icon in the top-left.
Observe the error in devtools.

piclez · 2021-05-07T07:09:53Z

I'm also getting same error.
"react-admin": "^3.8.2"

dylanh724 · 2021-05-30T08:43:36Z

Still happening, react-admin@3.14.4

RSalo · 2021-06-14T19:40:58Z

The same.

salake · 2021-06-23T08:46:23Z

+1

jjaakko · 2021-06-24T12:31:06Z

+1

herman-the-worm · 2021-06-24T13:56:38Z

+1

nmay231 · 2021-06-25T00:28:51Z

@fzaninotto
I uploaded my local replication from a fresh project to code sandbox (original setup instructions in my above comment): https://codesandbox.io/s/infallible-raman-54kzh.

I still can't pinpoint the exact reason(s) why it happens in our projects but not yours.

Instructions: refresh the embedded browser page and hover over the hamburger icon to see the error in devtools

fzaninotto · 2021-06-28T15:07:02Z

@nmay231 Thanks for the repro.

Here is the yarn.lock of your package:

react-transition-group@^4.4.0, react-transition-group@^4.4.1:
  version "4.4.1"
  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
  dependencies:
    "@babel/runtime" "^7.5.5"
    dom-helpers "^5.0.1"
    loose-envify "^1.4.0"
    prop-types "^15.6.2"

It shows that the problem isn't in react-transition-group, as it is upgraded to a version that doesn't have the issue.

Reproducing the bug just requires to enable StrictMode (see https://codesandbox.io/s/pedantic-ritchie-ejnr9?file=/src/index.tsx, where I simply forked the simple example codesandbox and added StrictMode). Hovering on the hamburger icon does show the error.

And this is a known material-ui bug (mui/material-ui#13394). I'm not sure that we can do anything about it in react-admin.

Closes #4577

Closes marmelab#4577

fzaninotto added the bug label Mar 29, 2020

fzaninotto added a commit that referenced this issue Mar 29, 2020

Fix duplicate react-transition-group package

6b9e746

Closes #4577

fzaninotto mentioned this issue Mar 29, 2020

Fix duplicate react-transition-group package #4597

Merged

fzaninotto self-assigned this Mar 29, 2020

djhi closed this as completed in #4597 Mar 30, 2020

leonardoarroyo mentioned this issue May 8, 2020

Deprecated findDOMNode warning in StrictMode #4793

Closed

djhi mentioned this issue May 11, 2020

warning when deleting last element on last page in data table #4794

Closed

alextaymx mentioned this issue Dec 20, 2020

Deprecated findDOMNode warning in StrictMode #5693

Closed

djhi reopened this Jan 22, 2021

fzaninotto added a commit that referenced this issue Jun 28, 2021

Fix "Deprecated findDOMNode" warning in StrictMode

258e56f

Closes #4577

fzaninotto mentioned this issue Jun 28, 2021

Fix "Deprecated findDOMNode" warning in StrictMode #6398

Merged

djhi closed this as completed in #6398 Jun 28, 2021

ogustavo-pereira pushed a commit to ogustavo-pereira/react-admin that referenced this issue Nov 23, 2021

Fix "Deprecated findDOMNode" warning in StrictMode

6f8ac28

Closes marmelab#4577

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Deprecated findDOMNode warning in StrictMode - originating from react-transition-group #4577

Deprecated findDOMNode warning in StrictMode - originating from react-transition-group #4577

bard commented Mar 24, 2020

fzaninotto commented Mar 29, 2020

kaizenlabs commented Dec 23, 2020

wedi commented Jan 21, 2021

rockallite commented Feb 2, 2021

herman-the-worm commented Mar 3, 2021

yab94 commented May 5, 2021

fzaninotto commented May 7, 2021

nmay231 commented May 7, 2021

piclez commented May 7, 2021

dylanh724 commented May 30, 2021

RSalo commented Jun 14, 2021

salake commented Jun 23, 2021

jjaakko commented Jun 24, 2021

herman-the-worm commented Jun 24, 2021

nmay231 commented Jun 25, 2021 •

edited

fzaninotto commented Jun 28, 2021

Deprecated findDOMNode warning in StrictMode - originating from react-transition-group #4577

Deprecated findDOMNode warning in StrictMode - originating from react-transition-group #4577

Comments

bard commented Mar 24, 2020

fzaninotto commented Mar 29, 2020

kaizenlabs commented Dec 23, 2020

wedi commented Jan 21, 2021

rockallite commented Feb 2, 2021

herman-the-worm commented Mar 3, 2021

yab94 commented May 5, 2021

fzaninotto commented May 7, 2021

nmay231 commented May 7, 2021

piclez commented May 7, 2021

dylanh724 commented May 30, 2021

RSalo commented Jun 14, 2021

salake commented Jun 23, 2021

jjaakko commented Jun 24, 2021

herman-the-worm commented Jun 24, 2021

nmay231 commented Jun 25, 2021 • edited

fzaninotto commented Jun 28, 2021

nmay231 commented Jun 25, 2021 •

edited