retiring the 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. 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
    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 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 , 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 , 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: https://github.com/ant-design/ant-design/issues/22493#issuecomment-619562638. 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 https://github.com/ant-design/ant-design/blob/dff19af744cce8920f8038f3d32a3051cae7ef50/components/button/button.tsx#L265-L269
  If you use (type="link") it will not use the Wave component, that's what @CathyXian mentioned.

• Switch https://github.com/ant-design/ant-design/blob/dabec4c8331c6171aaac08ad8b347c6ae754f032/components/switch/index.tsx#L65

• Tag https://github.com/ant-design/ant-design/blob/e1299bfcc97a97078c51f33ae939d815e4eacf7f/components/tag/index.tsx#L114-L127

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

<Button type="primary" htmlType="submit" > LOG IN </Button>

"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

+1

+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!

@rafaelcalhau
It's basically the same as removing StrictMode, as it only performs validations in development environment. So, you just disabled all the checks for your own code, which is exactly what StrictMode is made for.

same issue.

Same issue.

Same issue

@enoh-barbu I don't think anyone is actively trying to fix this.

As much as I hate seeing an error when I open the console, removing strict mode for the sake of this error is ridiculous to say the least.

Up

How about this if we don't have any solution ?

before)

after)

same issue until now.

same issue until now.

same issue until now

same issue still.

Still broken

How about this if we don't have any solution ?

before)
(big image)

after)
(big image)

Even better: if you close the console, every warning is gone 😄

Jokes aside: facing this issue too on multiple components

still the same issue
helps get rid of React.StrictMode

Question to anyone following thread...what does this even MEAN (the error specifically), and has anyone looked at the code to see what might be causing it (or why it matters). Quite honestly I'd try fix it, but I don't have the time (or the knowledge of the codebase) to investigate and see why it is happening or where in the code base the error exists.

edit: clearly I should add that I as well experience the error (though I didn't have it several days ago, so I am wondering what the specific circumstances are that trigger the error, i.e., in which situations is the deprecated method findDOMNode being called on Button?)

Perhaps we should start treating this thread as a collaborative effort and listing situations under which we experience the warning and start to troubleshoot rather than simply state "yup, have error, please fix."

@shawnpetros
I am not an expert by any means on the codebase, but use it frequently enough to have encountered the issue not just on the button element. Spent a bit of time investigating, and learned that the main use of findDomNode occurs in the wave component. What is wave? From what I can gather a tool to animate things, such as the button components amongst others.

• If you are curious, the offender shows up here: https://github.com/ant-design/ant-design/search?q=findDomNode
• and can be seen in action here: https://github.com/ant-design/ant-design/blob/820aa04a96d6b1ced9697bb9293a293dfb676364/components/button/button.tsx#L295

Aside from disabling strict mode (which is what I resorted to until a more appropriate fix is available, or I have time to learn more about wave to propose one myself...), from the looks of the code it might be easier to add a PR to use props for disabling the wave usage, than to fully replace the findDomNode usage for now. A bit of googling will reveal it is not just an ant design problem (ie: https://stackoverflow.com/questions/61220424/material-ui-drawer-finddomnode-is-deprecated-in-strictmode), so I would assume not the easiest fix to implement, or else someone would have jumped on it already. Since any changes would affect not just the button, we might just have to wait until the ant-design creators have time to prioritize this more so they can thoroughly test a proper solution....I certainly appreciate all their work they have done to get it here, so I am sure whatever the solution will be is going to be something that works just as well as the rest!

edit:
for anyone curious why this might not be an "easy fix", here are some suggested solutions for ditching findDomNode. https://medium.com/trabe/getting-rid-of-finddomnode-method-in-your-react-application-a0d7093b2660
assuming that it affects multiple components, this would indeed be a bigger task than anyone has "free" time for...

Trace https://github.com/ant-design/ant-design/issues/26136

Same issue

This ticket has been open for over 7 months.

Same

27755 there is a pull request to fix this issue

+1

I don't know about the rules in this project, but in other communities spamming "same" and "+1" comments is discouraged because

• if something is a pressing issue, the developers typically are well aware of it,
• it doesn't add anything substantial to solve the issue,
• it takes time off the developers to go through their notifications,
• it takes time off other watchers, who also have a lot of spam in their notifications.

Perhaps we can simply express support for this issue by using :+1: on the top issue.

Fixed in https://github.com/ant-design/ant-design/pull/27755

Thank you for working on the fix, I love the library. Unfortunately I'm still seeing this warning with [email protected].
Only appears after the async-validator fires when using an Input inside a Form.

I got same issue with [email protected]