Description
I just integrated bit into my project, when I build my components everything is going well and I don't get errors but when I see them on the platform I get the following error in the overview section...
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.
Specifications
- Bit version: 14.7.1
- Node version: 12.11.0
- npm / yarn version: 6.11.3/1.17.3
- Platform: MacOS
- Bit compiler (include version): [email protected]
- Bit tester (include version): not apply
Context and additional information
My component:
import React from 'react';
import ReactMarkdown from 'react-markdown';
import MarkdownLinkRenderer from '~components/utils/MarkdownLinkRenderer';
import { ReactComponent as helpIcon } from '~assets/icons/info-circular-button.svg';
import { ReactComponent as exclamationIcon } from '~assets/icons/exclamation.svg';
import { ReactComponent as closeIcon } from '~assets/icons/close.svg';
import { ReactComponent as checkIcon } from '~assets/icons/checked.svg';
const iconTypes = {
help: helpIcon,
error: exclamationIcon,
success: checkIcon,
close: closeIcon,
};
const renderIcon = (type = 'help') =>
React.createElement(iconTypes[type], { className: 'help-icon' });
class Help extends React.Component {
constructor(props) {
super(props);
this.spanRef = React.createRef();
this.state = {
currentTooltipPosition: {},
};
}
componentDidMount() {
window.addEventListener('scroll', this.handleScroll, false);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll, false);
}
onMouseHover = () => {
const { type, right } = this.props;
if (this.spanRef && this.spanRef.current && type === 'error' && right) {
const currentPosition = this.spanRef.current.getBoundingClientRect();
this.setState({
currentTooltipPosition: {
top: currentPosition.top + 2,
left: currentPosition.left + 30,
position: 'fixed',
},
});
}
};
handleScroll = () => {
const { type, right } = this.props;
if (this.spanRef && this.spanRef.current && type === 'error' && right) {
this.setState({
currentTooltipPosition: {
display: 'none',
},
});
}
};
textToRender = text => {
return Array.isArray(text) ? (
text
) : (
<ReactMarkdown source={text} renderers={{ link: MarkdownLinkRenderer }} />
);
};
render() {
const { props, state, spanRef, onMouseHover, textToRender } = this;
const { text, modal, type, bottom, right, left, styles } = props;
const { currentTooltipPosition } = state;
const spanClassNames = [
'help-text',
type === 'error' && 'help-error-text',
right && 'right',
bottom && 'bottom',
left && 'left',
styles && styles.helpText,
].filter(Boolean);
return (
<div
className={`help ${modal ? 'help-modal' : ''}`}
data-testid={`${modal ? 'wrapped-input-help-modal' : 'wrapped-input-help'}`}
>
<div
ref={spanRef}
onMouseEnter={onMouseHover}
className={`help-icon-container ${(styles && styles.helpIcon) || ''}`}
>
{renderIcon(type)}
<span style={currentTooltipPosition} className={spanClassNames.join(' ')}>
{textToRender(text)}
</span>
</div>
</div>
);
}
}
export default Help;
type/help wanted