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: findDOMNode is deprecated in StrictMode. #345

Closed
viclafouch opened this issue Dec 30, 2020 · 6 comments
Closed

Warning: findDOMNode is deprecated in StrictMode. #345

viclafouch opened this issue Dec 30, 2020 · 6 comments

Comments

@viclafouch
Copy link

viclafouch commented Dec 30, 2020

Expected Behavior

I've just installed Notistack on my project in React 17. I followed the Getting Started and got this warning/error:

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

I would like to avoid removing the Strict Mode.

image

Steps to Reproduce

  • Use Notistack in React 17 and Strict Mode.
<React.StrictMode>
  <SnackbarProvider>
    <App />
  <SnackbarProvider>
</React.StrictMode>
  • Enqueue a notification
enqueueSnackbar('Erreur', {
  variant: 'error'
})

Context

Your Environment

Tech Version
Notistack v1.0.3
React 17.0.1
Browser Chrome Version 87.0.4280.88 (Build officiel) (x86_64)
etc.
@mhmtugur
Copy link

mhmtugur commented Jan 9, 2021

same here

@ahmcho
Copy link

ahmcho commented Jan 25, 2021

I believe this is a Material UI bug, to be precise a bug in Transition component. I have the same problem with MUI Menu component and after browsing came to conclusion that you either need to disable StrictMode or wait until it's fixed in the new version of Material UI. Here is the discussion.

@chrisrrowland
Copy link

chrisrrowland commented Mar 29, 2021

Is it possible for us to disable the transition via some notistack property until this is fixed?

@raphaelsoul
Copy link

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

this will prevent printing this warn. But be aware of that strict mode helps you find many potential problems. You'd better enable it at least in development

@iamhosseindhv
Copy link
Owner

Duplicate of #257

@bobzhang123456
Copy link

This is a temporary solution.

ReactDOM.render(

<React.StrictMode>

</React.StrictMode>
,
document.getElementById("root")
);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants