PF3 Card use break with webpack tree shaking on when using embedded sub-components

Using the following style, the Card component breaks with webpack tree shaking (i.e. production mode) turned on:

import React from 'react'
import PropTypes from 'prop-types'
import Format from 'intl-messageformat'
import { Card, Icon } from 'patternfly-react'

const UpgradeReview = ({
  hostCount,
  hostLabel = '{count,number} {count, plural, one {Host} other {Hosts}}',
  hostsDescription = 'Will be upgraded one at a time during Cluster upgrade'
}) => {
  const hostLabelFormat = new Format(hostsLabel)
  return (
    <div className='clusterUpgradeWizard-UpgradeReview'>
      <Card>
        <Card.Title>
          <Icon type='pf' name='container-node' className='circle-icon' />
          <div className='info-label'>
            { hostLabelFormat.format({ count: hostCount }) }
          </div>
        </Card.Title>
        <Card.Body>
          { hostsDescription }
        </Card.Body>
      </Card>
    </div>
  )
}
UpgradeReview.propTypes = {
  hostCount: PropTypes.number.isRequired,
  hostLabel: PropTypes.string,
  hostsDescription: PropTypes.string
}
export default UpgradeReview

The reason it breaks due to a change in #2190 that moved the sub components from Card.js to the peer index.js. It is the only component that looks like this.

[sjd78]

Hi @sjd78 do you have a work around for this or is this a blocker for you at this time?

I have a work around – import and use CardTitle and CardBody directly. Looks like an easy fix, I may submit a PR for that if I have a few extra cycles this week.

[rachael-phillips]

Hi @sjd78 yes, we can close this issue