findDOMNode is deprecated in StrictMode

user_11806466 0
Viewed 9823

I am using antd and I am seeing this error

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DOMWrap which is inside StrictMode. Instead, add a ref directly to the element you want to reference

I have realized that it is because of mode="horizontal". I have tried using other components as well and I see this error a lot in antd. Is there any way to fix this issue? This is my current code

import React from 'react'
import { connect } from 'react-redux';
import { Layout, Menu  } from 'antd';

const { Header, Footer, Content } = Layout;

  const AddForm = () => {
    return (
    <div>
        {/* // Menu Starts from here */}

        <Layout className="layout">
            <Header>
            <div className="logo" />
            <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                <Menu.Item key="1">nav 1</Menu.Item>
                <Menu.Item key="2">nav 2</Menu.Item>
                <Menu.Item key="3">nav 3</Menu.Item>
            </Menu>
            </Header>
            <Content style={{ padding: '0 50px' }}>
            <div className="site-layout-content">Content</div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
    </div>
    )

  };
antd reactjs
6 Answers

I'm fixing it by wrapping the commponent using <React.StrictMode>

in my case, the the button inside the form caused that error, so I solve it by

<React.StrictMode>
    <Button type="primary" htmlType="submit" className="submit">
        Register
    </Button>
</React.StrictMode>
user_71302370

There is nothing you can do about it. You have to wait for antd to support Strict Mode. Yet, you can consider contributing to the project.

user_105790130
user_115658350

for anyone facing this warning, I managed to resolve it by upgrading ant to "antd": "4.20.7", and the issue disappeared. I am using react version 17.0.2.

I think it was resolved in newer release of antd, however, I could not find any reference online. Hope this helps.

user_49498870
user_30406050

As a workaround, I am adding this at the root file. I'm suppressing the warning like so:

// eslint-disable-next-line
const consoleError = console.error.bind(console);
// eslint-disable-next-line
console.error = (errObj, ...args) => {
  if (
    (process.env.NODE_ENV === 'development' && typeof errObj.message === 'string' && args.includes('findDOMNode')
  ) {
    return;
  }
  consoleError(errObj, ...args);
};

I know this is not a fix, but at least my console is not bloated with findDOMNode messages. Until And-Design fixes this, this will do.

user_15020140
Related