Element type is invalid when pre-rendering a component with react-rails in a erb view

124 views Asked by At

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

0

There are 0 answers