I have the following two components in the folder javascript/components/cardlist/ which I am trying to render in a erb view in rails 5.1.7
CardList.js
import React from "react"
import PropTypes from "prop-types"
import CardBlock from './CardBlock'
class CardList extends React.Component {
render () {
const allCards = this.props.all_cards.map((card, index) => (
<CardBlock
key={card.id}
name={card.card_name}
/>
));
return (
<React.Fragment>
{allCards}
</React.Fragment>
);
}
}
CardList.propTypes = {
all_cards: PropTypes.array
};
export default CardList
Having card block in the same folder, and looking like:
CardBlock.js
import React from "react"
import PropTypes from "prop-types"
class CardBlock extends React.Component {
render () {
return (
<React.Fragment>
<p>trial</p>
</React.Fragment>
);
}
}
CardList.propTypes = {
listing_name: PropTypes.string
};
export default CardBlock
and I have in my views
<%= react_component("cardlist/cardlist", { all_cards: @all_cards }, {prerender: true}) %>
The line import CardBlock from './CardBlock'
in the CardList component gives me this error:
Encountered error "#<ExecJS::ProgramError: 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.>" when prerendering cardlist/CardList with