Skip to content
This repository was archived by the owner on Dec 13, 2023. It is now read-only.
This repository was archived by the owner on Dec 13, 2023. It is now read-only.

Fade Error when using <Message> Component  #9

@nick-ma

Description

@nick-ma

I encountered with errors when I use component within .
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/ui-kit@0.3.0-2

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions