chat-widget-sample
chat-widget-sample copied to clipboard
Fade Error when using <Message> Component
I encountered with errors when I use <Message> component within <MessageList>. I've traced down to the ui-kit source code, and found the following lines:
var message = React.createElement(
Toggle,
null,
function (_ref2) {
var authorOpened = _ref2.on,
getElementTogglerProps = _ref2.getElementTogglerProps;
return React.createElement(
StyledMessage,
_extends$3({}, getElementTogglerProps(props), { own: isOwn, tabIndex: null }),
React.createElement(
Content,
null,
React.createElement(
reactTransitionGroup_2,
null,
(!showMetaOnClick || authorOpened) && React.createElement(
Fade,
null,
React.createElement(
MessageMeta,
null,
authorName && React.createElement(
AuthorName,
null,
authorName,
' '
),
date && React.createElement(
Time,
null,
date
)
)
)
),
children,
deliveryStatus && React.createElement(
Status,
null,
deliveryStatus
)
)
);
}
);
and the definition of Fade
var Fade = function Fade(_ref) {
var children = _ref.children,
props = objectWithoutProperties$1(_ref, ['children']);
return React.createElement(
reactTransitionGroup_4,
_extends$3({}, props, { classNames: fade, timeout: 200 }),
children
);
};
Fade.propTypes = {
children: PropTypes.node
};
I don't know what goes wrong, I need your help, thx.
Version: @livechat/[email protected]
react-dom.development.js:55 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 `Fade`.
at invariant (react-dom.development.js:55)
at createFiberFromTypeAndProps (react-dom.development.js:10100)
at createFiberFromElement (react-dom.development.js:10121)
at reconcileSingleElement (react-dom.development.js:13798)
at reconcileChildFibers (react-dom.development.js:13855)
at reconcileChildren (react-dom.development.js:14224)
at mountIndeterminateComponent (react-dom.development.js:14848)
at beginWork (react-dom.development.js:15316)
at performUnitOfWork (react-dom.development.js:18150)
at workLoop (react-dom.development.js:18190)
at renderRoot (react-dom.development.js:18276)
at performWorkOnRoot (react-dom.development.js:19165)
at performWork (react-dom.development.js:19077)
at performSyncWork (react-dom.development.js:19051)
at interactiveUpdates$1 (react-dom.development.js:19320)
at interactiveUpdates (react-dom.development.js:2169)
at dispatchInteractiveEvent (react-dom.development.js:4880)
index.js:2178 The above error occurred in the <Fade> component:
in Fade (created by TransitionGroup)
in span (created by TransitionGroup)
in TransitionGroup (created by Toggle)
in div (created by Styled(div))
in Styled(div) (created by Toggle)
in div (created by Styled(div))
in Styled(div) (created by WithSubtheme(Message))
in ThemeProvider (created by WithSubtheme(Message))
in WithSubtheme(Message) (created by Toggle)
in Toggle (created by Message)
in div (created by Context.Consumer)
in MessageListItem (created by Message)
in Message (created by Maximized)
in div (created by Styled(div))
in Styled(div) (created by MessageList)
in MessageList (created by WithPinnedScroll(MessageList))
in WithPinnedScroll(MessageList) (created by Maximized)
in div (created by Maximized)
in div (created by Maximized)
in Maximized (created by ProjectTaskChat)
in div (created by ProjectTaskChat)
UPDATE: I add showMetaOnClick prop to Message, and it finally shows me the correct page, however, when I click the message, the same error occurs.