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

Comments

@latobibor
Copy link

@latobibor latobibor commented Mar 22, 2020

  • 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

@firesoftdev firesoftdev commented Mar 23, 2020

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

@saostad
Copy link

@saostad 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

@ana-rajat ana-rajat commented Mar 28, 2020

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

@myou
Copy link

@myou 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.

@duong-le
Copy link

@duong-le duong-le commented Mar 31, 2020

I am getting the same error

@yoyo837
Copy link
Contributor

@yoyo837 yoyo837 commented Mar 31, 2020

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

@DavidSolerMarco
Copy link

@DavidSolerMarco DavidSolerMarco commented Apr 2, 2020

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

@yayxs
Copy link

@yayxs 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

@marianelaleoncini marianelaleoncini commented Apr 10, 2020

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

1 similar comment
@Sikae
Copy link

@Sikae Sikae commented Apr 11, 2020

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

@javiermoli
Copy link

@javiermoli 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 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 phifa commented Apr 14, 2020

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

@yoyo837
Copy link
Contributor

@yoyo837 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 ngosang commented Apr 14, 2020

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

@Even-Lau
Copy link

@Even-Lau Even-Lau commented Apr 15, 2020

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

@w3ever
Copy link

@w3ever w3ever commented Apr 20, 2020

Same issue

@nehvaleem
Copy link

@nehvaleem nehvaleem commented Apr 23, 2020

Same issue also :(

@anesask
Copy link

@anesask 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 hz2 commented Apr 24, 2020

Same issue

@jjaijg
Copy link

@jjaijg jjaijg commented Apr 24, 2020

Same issue here.

@yoyo837 yoyo837 added this to Todo in Support <React.StrictMode /> via automation Apr 24, 2020
@hengkx hengkx mentioned this issue Apr 24, 2020
14 tasks
@arpesam
Copy link

@arpesam arpesam commented Apr 24, 2020

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

@Invertisment
Copy link

@Invertisment 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"

@jeon-repo
Copy link

@jeon-repo jeon-repo commented Jan 27, 2021

Same issue with BackTop button

@alansaldivar87
Copy link

@alansaldivar87 alansaldivar87 commented Jan 27, 2021

Menu.Item it's also causing these logs.

@alienriquebm
Copy link

@alienriquebm alienriquebm commented Feb 26, 2021

Any update about this?

@AlexeyTeterin
Copy link

@AlexeyTeterin AlexeyTeterin commented Feb 28, 2021

Same issue with Slider.

@Onlylonger
Copy link

@Onlylonger Onlylonger commented Mar 9, 2021

same issue with antd@4.13.0 for Submenu

@nanzm
Copy link

@nanzm nanzm commented Mar 13, 2021

same issue with antd@4.12.3 for DomWrapper

@armouti
Copy link

@armouti armouti commented Mar 13, 2021

same issue in antd@4.13.1 for submenu

@M2Changezi
Copy link

@M2Changezi M2Changezi commented Mar 15, 2021

samee issue is has it been solved ?

@liuliangsir
Copy link

@liuliangsir liuliangsir commented Mar 27, 2021

same issue in antd@4.14.0 for slider

@PyGod
Copy link

@PyGod PyGod commented Mar 28, 2021

same issue with Image antd@4.14.1"

@ashishkarki
Copy link

@ashishkarki ashishkarki commented Mar 28, 2021

same issue with Alert component and antd version = 4.14.1

@mateuszsplawski
Copy link

@mateuszsplawski mateuszsplawski commented Mar 28, 2021

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

@yaroslavert
Copy link

@yaroslavert yaroslavert commented Apr 6, 2021

Same issue antd 4.15.0

@josectobar
Copy link

@josectobar josectobar commented Apr 12, 2021

Same issue with Rate component and 4.15.0

@yewness
Copy link

@yewness yewness commented Apr 13, 2021

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

@fengerzh
Copy link

@fengerzh fengerzh commented Apr 14, 2021

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

@adred
Copy link

@adred adred commented Apr 14, 2021

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

@yoyo837
Copy link
Contributor

@yoyo837 yoyo837 commented Apr 14, 2021

@cdll
Copy link

@cdll 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

@jellohouse jellohouse commented Apr 18, 2021

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

@lucasltv lucasltv commented Apr 21, 2021

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

@yoyo837
Copy link
Contributor

@yoyo837 yoyo837 commented Apr 21, 2021

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

#22493 (comment)

@nguyenngoclongdev
Copy link

@nguyenngoclongdev nguyenngoclongdev commented Apr 26, 2021

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

@victorlucss
Copy link

@victorlucss victorlucss commented Apr 27, 2021

Same issue here! This hasn't fixed yet?

@hkrainko
Copy link

@hkrainko hkrainko commented Apr 28, 2021

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

@adarshaacharya
Copy link

@adarshaacharya adarshaacharya commented Apr 30, 2021

Same issue for Affix, and MenuItems.

@luantruong
Copy link

@luantruong luantruong commented May 5, 2021

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

@yoyo837
Copy link
Contributor

@yoyo837 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.
Linked pull requests

Successfully merging a pull request may close this issue.