React v16 not working with this plugin

[austinh]

Using this plugin while also using react@^16.0.0 causes the following error in the browser:

invariant.js:42 Uncaught Error: Element ref was specified as a string (notify) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).
    at invariant (invariant.js:42)
    at coerceRef (react-dom.development.js:8579)
    at reconcileSingleElement (react-dom.development.js:9379)
    at reconcileChildFibers (react-dom.development.js:9477)
    at reconcileChildrenAtPriority (react-dom.development.js:10127)
    at reconcileChildren (react-dom.development.js:10118)
    at finishClassComponent (react-dom.development.js:10254)
    at updateClassComponent (react-dom.development.js:10226)
    at beginWork (react-dom.development.js:10605)
    at performUnitOfWork (react-dom.development.js:12573)
invariant @ invariant.js:42
coerceRef @ react-dom.development.js:8579
reconcileSingleElement @ react-dom.development.js:9379
reconcileChildFibers @ react-dom.development.js:9477
reconcileChildrenAtPriority @ react-dom.development.js:10127
reconcileChildren @ react-dom.development.js:10118
finishClassComponent @ react-dom.development.js:10254
updateClassComponent @ react-dom.development.js:10226
beginWork @ react-dom.development.js:10605
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
enqueueSetState @ react-dom.development.js:9646
ReactComponent.setState @ react.development.js:218
(anonymous) @ Router.js:103
(anonymous) @ createTransitionManager.js:228
(anonymous) @ createTransitionManager.js:83
done @ AsyncUtils.js:74
(anonymous) @ AsyncUtils.js:80
(anonymous) @ authRoutes.js:17
Promise resolved (async)
getComponent @ authRoutes.js:15
getComponentsForRoute @ getComponents.js:12
(anonymous) @ getComponents.js:30
(anonymous) @ AsyncUtils.js:79
mapAsync @ AsyncUtils.js:78
getComponents @ getComponents.js:29
finishEnterHooks @ createTransitionManager.js:77
next @ AsyncUtils.js:47
loopAsync @ AsyncUtils.js:51
runTransitionHooks @ TransitionUtils.js:83
runEnterHooks @ TransitionUtils.js:107
(anonymous) @ createTransitionManager.js:70
runTransitionHooks @ TransitionUtils.js:74
runChangeHooks @ TransitionUtils.js:131
finishMatch @ createTransitionManager.js:67
(anonymous) @ createTransitionManager.js:45
done @ AsyncUtils.js:16
(anonymous) @ matchRoutes.js:234
(anonymous) @ matchRoutes.js:185
next @ AsyncUtils.js:41
loopAsync @ AsyncUtils.js:51
matchRoutes @ matchRoutes.js:231
onChildRoutes @ matchRoutes.js:179
(anonymous) @ matchRoutes.js:32
(anonymous) @ rootRoute.js:12
Promise resolved (async)
getChildRoutes @ rootRoute.js:11
getChildRoutes @ matchRoutes.js:25
matchRouteDeep @ matchRoutes.js:195
(anonymous) @ matchRoutes.js:232
next @ AsyncUtils.js:34
loopAsync @ AsyncUtils.js:51
matchRoutes @ matchRoutes.js:231
match @ createTransitionManager.js:41
historyListener @ createTransitionManager.js:222
listen @ createTransitionManager.js:246
Router_componentWillMount @ Router.js:96
callComponentWillMount @ react-dom.development.js:9777
mountClassInstance @ react-dom.development.js:9834
updateClassComponent @ react-dom.development.js:10216
beginWork @ react-dom.development.js:10605
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
scheduleTopLevelUpdate @ react-dom.development.js:13395
updateContainer @ react-dom.development.js:13425
renderSubtreeIntoContainer @ react-dom.development.js:17108
render @ react-dom.development.js:17129
renderApp @ index.js:49
(anonymous) @ index.js:94
configureAPI @ api-setup.js:86
(anonymous) @ index.js:62
__webpack_require__ @ bootstrap 674ca770b414c16b5448:54
(anonymous) @ bundle.js:76060
__webpack_require__ @ bootstrap 674ca770b414c16b5448:54
webpackJsonpCallback @ bootstrap 674ca770b414c16b5448:25
(anonymous) @ bundle.js:1
react-dom.development.js:8305 The above error occurred in the <Notifications> component:
    in Notifications (created by AppWrapper)
    in div (created by AppWrapper)
    in AppWrapper (created by Connect(AppWrapper))
    in Connect(AppWrapper) (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in Provider```

[austinh]

Also get this error:

Uncaught TypeError: _reactNotificationSystemRedux2.default.show is not a function

[mutsumiya]

I got the same not-a-function error but for success and error. And then fixed by changing from:

import Notifications from 'react-notification-system-redux'

to

import * as Notifications from 'react-notification-system-redux'

[gor181]

1.1.6 released which should fix the issue with exports. Exports should work as per README

[austinh]

Thank you! :)

[aurbano]

Seeing the same error reported by @austinh up at the top, any news on fixing/working around it?

[whitershade]

@aurbano I fixed that issue through yarn add react-notification-system. There is no this problem with last version of react-notification-system (0.2.16).

[mrchief]

It seems react-notification-system (0.2.17) introduced this error. I started seeing this after upgrading. Reverting to 0.2.16 fixes this.

[gor181]

Should be resolved in v2.0.0 which was just released. Cuddos to @epotockiy