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

Warning: React does not recognize the nodeRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase noderef instead #511

Closed
sashahavia opened this issue Jul 30, 2020 · 9 comments · Fixed by #554, newerton/gobarber-frontend#11 or newerton/gostack-modulo07#17
Labels
Merged in next Merged but not live

Comments

@sashahavia
Copy link

I just updated react-toastify to 6.0.8 version and getting this error now

Warning: React does not recognize the `nodeRef` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `noderef` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by Toast)
    in Transition (created by ToastTransition)
    in ToastTransition (created by Toast)
    in Toast (created by ToastContainer)
    in div (created by ToastPositioner)
    in ToastPositioner (created by ToastContainer)
    in div (created by ToastContainer)
    in ToastContainer (created by Routes)
    in ErrorBoundary (created by Routes)
    in Routes (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in withRouter(Connect(Routes))
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider
@fkhadra
Copy link
Owner

fkhadra commented Aug 3, 2020

Hey,

Could you provide a codesanbox reproduction thanks.

@gnoesiboe
Copy link

I suspect this {...props} might be the problem. As nodeRef is part of ToastTransitionProps, it is passed to the <Transition /> component. Maybe something changed in react-transition-group recently? When I look into their code I see the props being added to a div-element that will probably result in this warning.

This could be fixed by making sure that nodeRef is pulled from the rest props ({...props})?

@fkhadra
Copy link
Owner

fkhadra commented Oct 5, 2020

Hey @gnoesiboe, are you able to reproduce the issue ?

Thanks

@gnoesiboe
Copy link

@fkhadra I ran into this issue myself. That is how I ended up here.

@fkhadra
Copy link
Owner

fkhadra commented Oct 15, 2020

@gnoesiboe if you have time could you try to reproduce the issue on codesandbox or share the repo if it's public. Thanks!

@gnoesiboe
Copy link

Sharing is not possible I'm afraid. And time is something I do not have at this point. I'll put it on my todo list but it won't be somewhere on top..

@fkhadra
Copy link
Owner

fkhadra commented Oct 15, 2020

No problem. Thank you anyway.

@fkhadra
Copy link
Owner

fkhadra commented Dec 23, 2020

This will be fixed with the new release. I'm removing the dependency to react-transition-group

@fkhadra fkhadra added Merged in next Merged but not live and removed Reproduction Needed labels Dec 23, 2020
@gnoesiboe
Copy link

ah, nice! Thanks!

@fkhadra fkhadra mentioned this issue Dec 29, 2020
fkhadra added a commit that referenced this issue Jan 25, 2021
## 💥 Breaking changes

- dependency to react-transition-group has been removed #514
- the `duration` parameter has been removed from `cssTransition`. Css animations just works now out of the box. Check the codesanbox below  
- the border-radius has been increased a bit

##  🚀 Features

- Css animation just works! 
[![View](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-toastify-animatecss-jxrx9?fontsize=14&hidenavigation=1&theme=dark&view=preview)

- add a way to load the CSS without a CSS loader
[![Edit react-toastify-inject-style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-toastify-inject-style-qfg0l?fontsize=14&hidenavigation=1&theme=dark)
- specify swipe direction, close #512 . Thanks to @denydavy
[![Edit react-toastify-drag-y](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-toastify-drag-y-lh88i?fontsize=14&hidenavigation=1&theme=dark)
- bundle size reduced from ~7k to ~5k!
- remove the dependency on prop-types.

## 🐛 Bugfix

- fix #541 apply pauseOnFocusLoss on first render
- fix #538 react-dom should be a peer dep
- fix #530 change id generation
- fix #534 #483 toastId cannot be reused
- fix #511 by removing react-transition-group
- fix #550 Unable to select text inside inputs when a toast is open
- fix #555 The toast timer starts after you click on the toast
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Merged in next Merged but not live
Projects
None yet
3 participants