unable to run .jsx files

[fourcolors]

Hi,

I have a .jsx file that I'm trying to render. I have a fresh version of storybook installed and it doesn't seem to render the .jsx file..

Here is what I'm dealing with.

import Readonly from '../app/assets/client/components/kit_checkout/Readonly';

const test = React.createElement('div', null, 'Summary of the form');
const readonlyProps = {
  editing: true,
  formValid: true,
  pristine: true,
  summary: test,
};

storiesOf('Readonly', module)
  .add('while ', () => test)
  .add('while editing', () => <Readonly {...readonlyProps} />);

The first while story renders fine, however the component doesn't. The Readyonly looks like this

import React from 'react';
import PropTypes from 'prop-types';

const Readonly = ({ editing, formValid, pristine, summary }) => (
  <div className="readonly" style={editing ? { display: 'none' } : { wordBreak: 'break-all' }}>
    {console.log(summary)}
    { (formValid || pristine) ? summary : <div className="error">Information Needed</div> }
  </div>
);

Readonly.propTypes = {
  editing: PropTypes.bool.isRequired,
  formValid: PropTypes.bool.isRequired,
  pristine: PropTypes.bool.isRequired,
  summary: PropTypes.node.isRequired,
};

export default Readonly;

do I need to configure the webpack config somehow?