Cannot use "Chips" for displaying data

monday Apps & Developers
, , , ,
1

I import chips like import { Chips} from "monday-ui-react-core"; and use just like here @storybook/cli - Storybook

I get error below

index.js:1 Warning: React.createElement: 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 your code at App.js:69.
in App (at src/index.js:7)
console. @ 0.chunk.js:49198
printWarning @ 0.chunk.js:65436
error @ 0.chunk.js:65408
createElementWithValidation @ 0.chunk.js:66881
render @ main.chunk.js:202
finishClassComponent @ 0.chunk.js:40017
updateClassComponent @ 0.chunk.js:39970
beginWork @ 0.chunk.js:41430
beginWork$1 @ 0.chunk.js:45948
performUnitOfWork @ 0.chunk.js:44939
workLoopSync @ 0.chunk.js:44912
performSyncWorkOnRoot @ 0.chunk.js:44530
scheduleUpdateOnFiber @ 0.chunk.js:43962
updateContainer @ 0.chunk.js:47111
(anonymous) @ 0.chunk.js:47494
unbatchedUpdates @ 0.chunk.js:44680
legacyRenderSubtreeIntoContainer @ 0.chunk.js:47493
render @ 0.chunk.js:47576
./src/index.js @ main.chunk.js:319
webpack_require @ bundle.js:786
fn @ bundle.js:151
1 @ main.chunk.js:446
webpack_require @ bundle.js:786
checkDeferredModules @ bundle.js:46
webpackJsonpCallback @ bundle.js:33
(anonymous) @ main.chunk.js:1
0.chunk.js:46710 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 App.
at createFiberFromTypeAndProps (0.chunk.js:46710:25)
at createFiberFromElement (0.chunk.js:46732:19)
at createChild (0.chunk.js:36555:32)
at reconcileChildrenArray (0.chunk.js:36821:29)
at reconcileChildFibers (0.chunk.js:37219:18)
at reconcileChildren (0.chunk.js:39636:32)
at updateHostComponent (0.chunk.js:40158:7)
at beginWork (0.chunk.js:41437:18)
at HTMLUnknownElement.callCallback (0.chunk.js:23109:18)
at Object.invokeGuardedCallbackDev (0.chunk.js:23158:20)
at invokeGuardedCallback (0.chunk.js:23211:35)
at beginWork$1 (0.chunk.js:45972:11)
at performUnitOfWork (0.chunk.js:44939:16)
at workLoopSync (0.chunk.js:44912:26)
at performSyncWorkOnRoot (0.chunk.js:44530:13)
at scheduleUpdateOnFiber (0.chunk.js:43962:11)
at updateContainer (0.chunk.js:47111:7)
at 0.chunk.js:47494:11
at unbatchedUpdates (0.chunk.js:44680:16)
at legacyRenderSubtreeIntoContainer (0.chunk.js:47493:9)
at Object.render (0.chunk.js:47576:14)
at ./src/index.js (main.chunk.js:319:50)
at webpack_require (bundle.js:786:30)
at fn (bundle.js:151:20)
at 1 (main.chunk.js:446:18)
at webpack_require (bundle.js:786:30)
at checkDeferredModules (bundle.js:46:23)
at Array.webpackJsonpCallback [as push] (bundle.js:33:19)
at main.chunk.js:1:119
createFiberFromTypeAndProps @ 0.chunk.js:46710
createFiberFromElement @ 0.chunk.js:46732
createChild @ 0.chunk.js:36555
reconcileChildrenArray @ 0.chunk.js:36821
reconcileChildFibers @ 0.chunk.js:37219
reconcileChildren @ 0.chunk.js:39636
updateHostComponent @ 0.chunk.js:40158
beginWork @ 0.chunk.js:41437
callCallback @ 0.chunk.js:23109
invokeGuardedCallbackDev @ 0.chunk.js:23158
invokeGuardedCallback @ 0.chunk.js:23211
beginWork$1 @ 0.chunk.js:45972
performUnitOfWork @ 0.chunk.js:44939
workLoopSync @ 0.chunk.js:44912
performSyncWorkOnRoot @ 0.chunk.js:44530
scheduleUpdateOnFiber @ 0.chunk.js:43962
updateContainer @ 0.chunk.js:47111
(anonymous) @ 0.chunk.js:47494
unbatchedUpdates @ 0.chunk.js:44680
legacyRenderSubtreeIntoContainer @ 0.chunk.js:47493
render @ 0.chunk.js:47576
./src/index.js @ main.chunk.js:319
webpack_require @ bundle.js:786
fn @ bundle.js:151
1 @ main.chunk.js:446
webpack_require @ bundle.js:786
checkDeferredModules @ bundle.js:46
webpackJsonpCallback @ bundle.js:33
(anonymous) @ main.chunk.js:1
index.js:1 The above error occurred in the

component:
in div (at App.js:68)
in div (at App.js:66)
in App (at src/index.js:7)

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.

This should be something very easy. Please help. I can use other components like “Button”

3

Hello there @canbax!

Which version of monday-ui-react-core are you using?

1 Like
4

Hey! is this issue is still relevant? If so can you try to update your monday-ui-react-core version to latest and update us id the error still reproduce?