Using <Button> results in "findDOMNode is deprecated in StrictMode" warning

I have searched the issues of this repository and believe that this is not a duplicate * (It was reported by somebody else but not through Issue Creator and it got auto-closed).

Reproduction link

latobibor/antd-tryout@e373cb5

Steps to reproduce

install dependencies (npm i)
run app (npm start)
check console

What is expected?

No warnings should be displayed.

What is actually happening?

A warning message will appear in console.log stating "Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:"

Environment	Info
antd	4.0.3
React	16.13.1
System	Windows 8.1
Browser	Chrome 80

The source of the problem is coming from <Button /> component.

See the file in question:
latobibor/antd-tryout@e373cb5#diff-b525f6f7c3584f9af17112d37dae3a42

retiring the <React.StrictMode> tag in method ReactDOM.render() works normally

I am getting same error in strict mode antd v4.0.4

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave 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

Is there any solution regarding the same or any suggestions would also be appreciated.

Removing strict mode just for the sake of a button is ridiculous. This is a legit problem with antd that needs to be fixed.

I am getting the same error

Need to do a lot of migration, such as #9870

The same here after a fresh install using the guide https://ant.design/docs/react/use-in-typescript

I have the same problem

desc

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave 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

solve

ReactDOM.render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>,
  ,
  document.getElementById('root')
);

I have the same issue. Can you fix it, please?

I have the same issue, but I'm using other components, so the problem is not just the <Button />.

I have the same problem. I'm using <InputMask ...> which comes from the "react-input-mask" library. I also use "material-ui" for the TextField element.

<InputMask
    mask='99/99/9999'
    onFocus={onFocus} onBlur={onBlur}
    defaultValue={fields.birthdate.value}
    error={fields.birthdate.error}
    helperText={fields.birthdate.helperText}
    id='birthdate' name='birthdate' label='Birthdate MM/DD/YYYY'
    type='tel' variant='filled' margin='dense'
>
    {(inputProps) =>
        <TextField {...inputProps} />
    }
</InputMask>

The line in question seems to be the <TextField {...inputProps} /> line.

disabling strict mode is not really an option. How can we fix this?

disabling strict mode is not really an option. How can we fix this?

Contribute to migration code about this.

I'm having this problem in SubMenu and Select components too.

Warning: Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: SubMenu

I got the same warning

Same issue

Same issue also :(

One more here, working with disabled <React.StrictMode>, but really hope it's not a longterm solution.

Same issue

Same issue here.

Same problem here, does Ant team already have a solution?

Menu also produces this warning:
<Menu mode="horizontal" >
If I remove the horizontal mode the warning disappears. But it's not a solution.

I guess it could be a big thing to refactor this. It may be needed to dig into multiple components.

Warning: 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. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in ul (created by DOMWrap)
    in DOMWrap (created by SubPopupMenu)
    in SubPopupMenu (created by Connect(SubPopupMenu))
    in Connect(SubPopupMenu) (created by Menu)
    in Provider (created by Menu)
    in Menu (created by Context.Consumer)
    in InternalMenu (created by Context.Consumer)

"antd": "^4.1.5"
"react": "^16.13.1"

Same issue, help!!! please.

Hello @latobibor. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forward to your contribution!

你好 @latobibor, 我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献！

Same issue

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave 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 button (created by Context.Consumer)
    in Wave (created by Context.Consumer)
    in Button (at SignInPage/index.js:93)
    in div (created by FormItemInput)
    in div (created by FormItemInput)
    in div (created by Context.Consumer)
    in Col (created by FormItemInput)
    in FormItemInput (created by FormItem)
    in div (created by Context.Consumer)
    in Row (created by FormItem)
    in FormItem (at SignInPage/index.js:92)
    in form (created by ForwardRef(Form))
    in ForwardRef(Form) (created by ForwardRef(InternalForm))
    in SizeContextProvider (created by ForwardRef(InternalForm))
    in ForwardRef(InternalForm) (at SignInPage/index.js:43)
    in div (at SignInPage/index.js:42)
    in div (at SignInPage/index.js:33)
    in div (created by Context.Consumer)
    in Col (at SignInPage/index.js:32)
    in div (created by Context.Consumer)
    in Row (at SignInPage/index.js:31)
    in SignInPage (at AuthLayout/index.js:14)
    in Route (at AuthLayout/index.js:10)
    in Switch (at AuthLayout/index.js:7)
    in AuthLayout (at publicRoute.js:11)
    in Route (at publicRoute.js:9)
    in PublicRoute (at App.js:17)
    in Switch (at App.js:16)
    in Suspense (at App.js:15)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:14)
    in div (at App.js:13)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

The same issue, I have just followed the use-in-typescript doc, with a simple demo like this:

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

But got this index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here error in console.

How to fix?

I think that we should turn off React.StrictMode and wait until ant design team fix this problem and update package.

same issue here, and

One more here, working with disabled <React.StrictMode>, but really hope it's not a longterm solution.

exactly

same issue in the latest version(antd 4.2.0)

Same issue
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave 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

+1

Same Issue Here
.
A Fix would be amazing! Thanks antd team!

same issue

so any solutions?

Plus one

Same issue.

Having this issue too, please fix!

Also seeing this issue with Button.

Please fix

Facing the same issue here

I am having the same issue. Is someone working on this issue?

Are you sure it has something to do with antd ? I switched to antd 3. and still have the same problem

Yes, because I am using the component. When I use normal html button component, it's not giving any error.

same here. Seems like quite the pressing issue. Ant D where ya at?

Is there anyone currently working on a PR? I may start writing one

@caelinsutch As far as I know, no one.

Main issue is in the wave.tsx file due to the use of findDOMNode. Several migration articles exist, such as this one or this one

Problem solved by using:

Inspired by official example: https://ant.design/components/form-cn/

I don't think your examle solves my case: #22493 (comment). And also is not known what you did at all. If you did anything.

@CathyXian Wrapping all buttons in a form doesn't solve the problem as most of the time <Button> components aren't used in forms but instead have onClick events associated to them.

As @caelinsutch pointed, the Wave component is using the deprecated method findDOMNode.

Quickly checking which components uses that method, I found:

Button

ant-design/components/button/button.tsx

Lines 265 to 269 in dff19af

    
           if (type === 'link') { 
        
             return buttonNode; 
        
           } 
        
           return <Wave>{buttonNode}</Wave>;

If you use (type="link") it will not use the Wave component, that's what @CathyXian mentioned.

Switch

ant-design/components/switch/index.tsx

Line 65 in dabec4c

<Wave insertExtraNode>

Tag

ant-design/components/tag/index.tsx

Lines 114 to 127 in e1299bf

    
             return isNeedWave ? ( 
        
               <Wave> 
        
                 <span {...tagProps} ref={ref} className={getTagClassName(configProps)} style={getTagStyle()}> 
        
                   {kids} 
        
                   {renderCloseIcon()} 
        
                 </span> 
        
               </Wave> 
        
             ) : ( 
        
               <span {...tagProps} ref={ref} className={getTagClassName(configProps)} style={getTagStyle()}> 
        
                 {kids} 
        
                 {renderCloseIcon()} 
        
               </span> 
        
             ); 
        
           };

The wave component should be refactored to remove the old method.
And, maybe other components should get rid of that method as well: https://github.com/ant-design/ant-design/search?q=findDOMNode&unscoped_q=findDOMNode

for some kind of weird reason it does not reproduce with the following:

  <React.Suspense fallback={''}>
    <App />
  </React.Suspense>

for some kind of weird reason it does not reproduce with the following:
  <React.Suspense fallback={''}>
    <App />
  </React.Suspense>

I tried this and work like a charm, but that question is, is it long term solutions?

for some kind of weird reason it does not reproduce with the following:
  <React.Suspense fallback={''}>
    <App />
  </React.Suspense>

This is no different than just removing the wrapped <React.StrictMode> around <App>. Which should not be necessary.

Also happened with Tabs conponent

Same here,
could you please give it a higher priority?

same issue 😓

I have the same problem here, has anyone found a solution?

I have the same problem here, has anyone found a solution?

I mean there is a solution as outlined above, refactoring the code, I'll probably get around to it later this week

Thank you! I am having the same issue as well!

same issue

same problem

                  `<Button
                        htmlType="button"
                        icon={<LoginOutlined />}
                        onClick={this.onLogin.bind(this)}
                    >
                        Welcome Back
                    </Button>`

I used htmlType attribute still getting this issue. Removal of StrictMode is not a solution. @AntD please provide the solution.

same issue

Any solution, same issue ....

same problem while using SubMenu.
"react": "^16.13.1",
"react-dom": "^16.13.1",
"antd": "^4.3.1",

Same problem I'm using button in the form.item
<Form.Item>
<Button type="primary" htmlType="submit" > LOG IN </Button>
</Form.Item>
"antd": "^4.3.1",

Why don't you do an overall investigation on this problem? @afc163

Same problem, Any solution ?

Same problem with a submenu in the vertical Menu,

Same issue here. It's coming out of the Button component, but I think it's actually in the Wave component, in componentDidMount and onTransitionStart. Could we just use a ref instead of calling findDOMNode(this)?

me too

+1

I wish developers followed the conventions and avoid putting +1 to nag everyone who subscribed to this thread via email. That's very annoying and unprofessional, @kreuzhofer @Lemii @moderndegree @TechieQian @lefterisk and others

Same issue here when using the Ant Design Menu

same issue here. need a fix asap

Same issue here when using the Ant Design Button

+1

Same issue here.

Same issue here, would really love a solution or workaround which doesn't require turning off strict mode.

I'm facing the same issue

Same issue here

same issue with submenu

@Ant team, I would suggest leaving this open but locking and muting the issue. These additional +1's and me too's provide absolutely no value to helping resolve the issue. You instead create noise and spam for those that are looking for noticeable updates. If you want to help, contribute and cut code reviews.

Thank you for all you do! :)

I just installed antd in my React TypeScript project and as soon as I used a button the error was thrown. Sad to find out there's no solution to this :l

Same here for ant.design button.
"antd": "^4.6.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",

Any updates? Or workaround?

same issue

第一行代码就报错。。。还不修复。。

I just discovered this issue when using a Button in my project.
I'm on "antd": "^4.6.2"

same issue here using the Modal.
I am getting 2 warnings:
`index.js:1 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

Move data fetching code or side effects to componentDidUpdate.
If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps.`

as well as :
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of AnimateChild which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

any updates ?

Same issue.

This needs to be fixed.

Issue here as well on 4.6.6 when using a button

Strict mode checks are run in development mode only; they do not impact the production build. So the message can get annoying...
Sure, commenting it out isn't a great answer, but if it doesn't work for you offer a fix?

Same problem with ant 4.6.6 and react 16.13.1 :(

Guys, just a suggestion in case this error is annoying for you:

const isDev = process.env.NODE_ENV === 'development'

ReactDOM.render(
  isDev ? <App /> : (
    <React.StrictMode>
      <App />
    </React.StrictMode>
  ),
  document.getElementById('root')
)

Cheers!

	if (type === 'link') {
	return buttonNode;
	}

	return <Wave>{buttonNode}</Wave>;

	return isNeedWave ? (
	<Wave>
	<span {...tagProps} ref={ref} className={getTagClassName(configProps)} style={getTagStyle()}>
	{kids}
	{renderCloseIcon()}
	</span>
	</Wave>
	) : (
	<span {...tagProps} ref={ref} className={getTagClassName(configProps)} style={getTagStyle()}>
	{kids}
	{renderCloseIcon()}
	</span>
	);
	};