Element ref was specified as a string (container-tc)
kalaivanan-muthusamy opened this issue · comments
App breaking because of react-notification-system
Piece of code from a functional component:
export default const Notification = () => {
return (
<NotificationSystem
ref={ref => {
window.__notification = ref
}}
/>
)
}
Some Utility code where actually adding notification
export const notify = (err, message, level) => {
window.__notification.addNotification({
position: 'tc',
message,
level,
autoDismiss: 5,
dismissible: 'button'
})
}
Error:
Uncaught Invariant Violation: Element ref was specified as a string (container-tc) but no owner was set. This could happen for one of the following reasons:
- You may be adding a ref to a function component
- You may be adding a ref to a component that was not created inside a component's render method
- You have multiple copies of React loaded
Configuration:
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-notification-system": "^0.2.17",
I just tested the latest version with the latest version of React as well, and I didn't get any errors. Can you set up a project so I can reproduce this?
Looks like the issue is fixed. Hence closing
Not totally fixed! Using React 17 the warning still arrises annoyingly if <Notifications /> component is wrapped within <React.StrictMode> .
Here's the warning I'm getting:
Warning: A string ref, "container-tr", 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
The issue seems to lie in the following line on NotificationSystem.jsx file
Configuration:
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-notification-system": "^0.4.0",