string ref warning when running under strict mode tree

[dgour007]

Application is running in strict mode as shown below:

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

Following warning message is received in browser console when react-bootstrap-sweetalert component loads under a string mode tree.
Warning: A string ref, "container", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://fb.me/react-strict-mode-string-ref
in div (created by Overlay)
in Overlay (created by SweetAlert)
in div (created by SweetAlert)
in SweetAlert (at IdleTimerContainer.jsx:19)
in div (at IdleTimerContainer.jsx:102)
in IdleTimerContainer (at AppFrame.jsx:179)
in App (at ProtectedRoute.jsx:31)
in Route (at ProtectedRoute.jsx:24)
in ProtectedRoute (at App.jsx:26)
in Switch (at App.jsx:24)
in Router (created by BrowserRouter)
in BrowserRouter (at App.jsx:23)
in ThemeProvider (at ThemeContext.js:264)
in ThemeProvider (at App.jsx:20)
in App (at src/index.js:8)
in StrictMode (at src/index.js:7)

Given link mentions to avoid using Legacy API: String Refs
[] https://fb.me/react-strict-mode-string-ref

[jkim1708]

Hey,
same for me too. Running latest react version and "react.strictMode" isn't explicitly turned on.
And it seems there aren't any workarounds...

[Daniel Jorgensen]

I am running the demo of this package locally and updated to the latest react and added strict mode at the root of the demo project, but don't get any warning.

[Daniel Jorgensen]

If i cannot reproduce, I can at least update to replace the string refs.

[Daniel Jorgensen]

Ok, I was able to reproduce by changing the webpack mode to 'development'.

[Daniel Jorgensen]

Issue resolved in react-bootstrap-sweetalert@5.1.12

[jkim1708]

Thanks! Keep up the good work!