Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
latobibor opened this issue Mar 22, 2020 · 171 comments · Fixed by #27755
Closed
1 task done

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

latobibor opened this issue Mar 22, 2020 · 171 comments · Fixed by #27755
Labels
help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request.

Comments

@latobibor
Copy link

  • 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

  1. install dependencies (npm i)
  2. run app (npm start)
  3. 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

@firesoftdev
Copy link

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

@saostad
Copy link

saostad commented Mar 27, 2020

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

@ana-rajat
Copy link

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

@myou
Copy link

myou commented Mar 28, 2020

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

@duongleh
Copy link

I am getting the same error

@yoyo837
Copy link
Contributor

yoyo837 commented Mar 31, 2020

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

@DavidSolerMarco
Copy link

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

@yayxs
Copy link

yayxs commented Apr 4, 2020

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')
);

@marianelaleoncini
Copy link

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

1 similar comment
@Sikae
Copy link

Sikae commented Apr 11, 2020

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

@javiermoli
Copy link

javiermoli commented Apr 13, 2020

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

@harbhub
Copy link

harbhub commented Apr 13, 2020

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.

@phifa
Copy link

phifa commented Apr 14, 2020

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

@yoyo837
Copy link
Contributor

yoyo837 commented Apr 14, 2020

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

Contribute to migration code about this.

cszczepaniak pushed a commit to joshprzybyszewski/cribbage that referenced this issue Apr 14, 2020
@ngosang
Copy link

ngosang commented Apr 14, 2020

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

@Even-Lau
Copy link

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

@jsdev-mario
Copy link

Same issue

@nehvaleem
Copy link

Same issue also :(

@anesask
Copy link

anesask commented Apr 23, 2020

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

@hz2
Copy link

hz2 commented Apr 24, 2020

Same issue

@jjaijg
Copy link

jjaijg commented Apr 24, 2020

Same issue here.

@hengkx hengkx mentioned this issue Apr 24, 2020
14 tasks
@arpesam
Copy link

arpesam commented Apr 24, 2020

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

@Invertisment
Copy link

Invertisment commented Apr 26, 2020

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"

@Reyloso
Copy link

Reyloso commented Apr 27, 2020

Same issue, help!!! please.

@jeon-repo
Copy link

Same issue with BackTop button

@alansaldivar87
Copy link

Menu.Item it's also causing these logs.

@alienriquebm
Copy link

Any update about this?

@AlexeyTeterin
Copy link
Contributor

Same issue with Slider.

@Onlylonger
Copy link

same issue with antd@4.13.0 for Submenu

@nanzm
Copy link

nanzm commented Mar 13, 2021

same issue with antd@4.12.3 for DomWrapper

@armouti
Copy link

armouti commented Mar 13, 2021

same issue in antd@4.13.1 for submenu

@M2Changezi
Copy link

samee issue is has it been solved ?

@liuliangsir
Copy link

same issue in antd@4.14.0 for slider

@PyGod
Copy link

PyGod commented Mar 28, 2021

same issue with Image antd@4.14.1"

@ashishkarki
Copy link

same issue with Alert component and antd version = 4.14.1

@mateuszsplawski
Copy link

Same issue with Modal. Version "antd": "^4.14.0"

@yaroslavert
Copy link

Same issue antd 4.15.0

@josectobar
Copy link

Same issue with Rate component and 4.15.0

@jarrettyew
Copy link

Same issue with FormItem. Version "antd": "^4.15.0"

@fengerzh
Copy link

Do not close this issue. 掩耳盗铃 is stupid!

@adred
Copy link

adred commented Apr 14, 2021

Been waiting for a fix for 6months. Hopefully, it can be fixed soon!

@yoyo837
Copy link
Contributor

yoyo837 commented Apr 14, 2021

#26136

@cdll
Copy link

cdll commented Apr 15, 2021

same issue here on clicking Menu.SubMenu with antd@4.15.1 and react@17.0.2

@jellohouse
Copy link

I'm getting this too on slider. This needs to be fixed!

I don't know why this issue was ever closed. The proposed solution is not very nice at all.

Whoever is working on this repo please fix it - I feel like this should be an easy fix.

@lucasltv
Copy link

???????????????????????? CLOSED?????????

@yoyo837
Copy link
Contributor

yoyo837 commented Apr 21, 2021

???????????????????????? CLOSED?????????

#22493 (comment)

@nguyenngoclongdev
Copy link

???????????????????????? CLOSED?????????

@victorlucss
Copy link

victorlucss commented Apr 27, 2021

Same issue here! This hasn't fixed yet?

@hkrainko
Copy link

???????????????????????? CLOSED?????????

@adarshaacharya
Copy link

Same issue for Affix, and MenuItems.

@luantruong
Copy link

Closed?????????????????? The problem still here and hasn't fixed??????????????????

@yoyo837
Copy link
Contributor

yoyo837 commented May 5, 2021

trace in #26136

@ant-design ant-design locked and limited conversation to collaborators May 5, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request.
Projects
None yet
Development

Successfully merging a pull request may close this issue.