Growl

[ehoesch@web.de]

Has anybody an idea how this growl stuff works. even if i just try to get the demo code running in an index.js like this:

:
import {GrowlDemo} from './client/components/GrowlDemo';
:
ReactDOM.render(<GrowlDemo/>, document.getElementById('root'));
:

i receive the following error in chrome after pressing any of the buttons:


Check the render method of `Growl`.
in Growl (at GrowlDemo.js:69)
in div (at GrowlDemo.js:68)
in div (at GrowlDemo.js:60)
in GrowlDemo (at index.js:113)
__stack_frame_overlay_proxy_console__ @ index.js:2178
printWarning @ warning.js:33
warning @ warning.js:57
createElementWithValidation @ react.development.js:1243
(anonymous) @ Growl.js:118
render @ Growl.js:117
finishClassComponent @ react-dom.development.js:7873
updateClassComponent @ react-dom.development.js:7850
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
invariant.js:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `TransitionGroup`.
at invariant (invariant.js:42)
at createFiberFromElement (react-dom.development.js:5753)
at createChild (react-dom.development.js:6976)
at reconcileChildrenArray (react-dom.development.js:7282)
at reconcileChildFibers (react-dom.development.js:7651)
at reconcileChildrenAtExpirationTime (react-dom.development.js:7764)
at reconcileChildren (react-dom.development.js:7747)
at updateHostComponent (react-dom.development.js:7998)
at beginWork (react-dom.development.js:8229)
at performUnitOfWork (react-dom.development.js:10224)
at workLoop (react-dom.development.js:10288)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at invokeGuardedCallback (react-dom.development.js:438)
at renderRoot (react-dom.development.js:10366)
at performWorkOnRoot (react-dom.development.js:11014)
at performWork (react-dom.development.js:10967)
at batchedUpdates (react-dom.development.js:11086)
at batchedUpdates (react-dom.development.js:2330)
at dispatchEvent (react-dom.development.js:3421)
invariant @ invariant.js:42
createFiberFromElement @ react-dom.development.js:5753
createChild @ react-dom.development.js:6976
reconcileChildrenArray @ react-dom.development.js:7282
reconcileChildFibers @ react-dom.development.js:7651
reconcileChildrenAtExpirationTime @ react-dom.development.js:7764
reconcileChildren @ react-dom.development.js:7747
updateHostComponent @ react-dom.development.js:7998
beginWork @ react-dom.development.js:8229
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
index.js:2178 The above error occurred in the <span> component:
in span (created by TransitionGroup)
in TransitionGroup (created by Growl)
in div (created by Growl)
in Growl (at GrowlDemo.js:69)
in div (at GrowlDemo.js:68)
in div (at GrowlDemo.js:60)
in GrowlDemo (at index.js:113)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:9747
captureError @ react-dom.development.js:10540
renderRoot @ react-dom.development.js:10391
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
invariant.js:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `TransitionGroup`.
at invariant (invariant.js:42)
at createFiberFromElement (react-dom.development.js:5753)
at createChild (react-dom.development.js:6976)
at reconcileChildrenArray (react-dom.development.js:7282)
at reconcileChildFibers (react-dom.development.js:7651)
at reconcileChildrenAtExpirationTime (react-dom.development.js:7764)
at reconcileChildren (react-dom.development.js:7747)
at updateHostComponent (react-dom.development.js:7998)
at beginWork (react-dom.development.js:8229)
at performUnitOfWork (react-dom.development.js:10224)
at workLoop (react-dom.development.js:10288)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at invokeGuardedCallback (react-dom.development.js:438)
at renderRoot (react-dom.development.js:10366)
at performWorkOnRoot (react-dom.development.js:11014)
at performWork (react-dom.development.js:10967)
at batchedUpdates (react-dom.development.js:11086)
at batchedUpdates (react-dom.development.js:2330)
at dispatchEvent (react-dom.development.js:3421)
invariant @ invariant.js:42
createFiberFromElement @ react-dom.development.js:5753
createChild @ react-dom.development.js:6976
reconcileChildrenArray @ react-dom.development.js:7282
reconcileChildFibers @ react-dom.development.js:7651
reconcileChildrenAtExpirationTime @ react-dom.development.js:7764
reconcileChildren @ react-dom.development.js:7747
updateHostComponent @ react-dom.development.js:7998
beginWork @ react-dom.development.js:8229
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421




I have reduced the demo to just the simple "success" button and dropped all other stuff. not yet working. i am a little bit disappointed.

Regards,

Eberhard

[mert.sincan]

Hi,

Did you describe Growl component in your GrowlDemo page? import {Growl} from 'primereact/components/growl/Growl'

Also, you need to add "react-transition-group": "^2.2.1" package into devDependencies in package.json.

Best Regards,