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

Fade Error when using <Message> Component #9

Open
nick-ma opened this issue Jan 10, 2019 · 1 comment
Open

Fade Error when using <Message> Component #9

nick-ma opened this issue Jan 10, 2019 · 1 comment

Comments

@nick-ma
Copy link

nick-ma commented Jan 10, 2019

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/[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)
@nick-ma
Copy link
Author

nick-ma commented Jan 10, 2019

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant