Webpack tree shaking support

(I’ve temporary disabled CommonChunks to try Carte Blanche)

When I’ve added a variation to my Button component, I get:

warning.js:44Warning: Failed propType: Invalid prop `component` of type `object` supplied to `Playground`, expected `function`.
common.js.js:1 Uncaught SyntaxError: Unexpected token <
warning.js:44 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
ReactCompositeComponent.js:772 Uncaught TypeError: Cannot read property '_currentElement' of null

My Carte Blanche configuration is:

new CarteBlanche({
      componentRoot: './app/components',
      plugins: [
        new ReactPlugin({ injectTags: ['<script src="common.js.js"></script>'] }),
      ],
    }),

My Button component is:

/**
 *
 * Button
 *
 */

import React, { PropTypes } from 'react';
import styleguide from './styleguide';

// Component styling
import CSSModules from 'react-css-modules';
import styles from './styles.styl';

// Component class
@CSSModules(styles, { allowMultiple: true })
class Button extends React.Component {
  static styleguide = styleguide;

  // Default component properties
  static defaultProps = {
    type: 'button',
    primary: false,
  };

  render() {
    // Style of Button's inner element
    let innerStyleName = 'Button__inner';
    if (this.props.primary) innerStyleName += ` ${innerStyleName}--primary`;

    // Type of the button
    const type = this.props.type;

    return (
      <button
        type={type}
        styleName='Button'
        className={this.props.className}
        onClick={this.props.onClick}
      >
        <div styleName={innerStyleName}>
          {this.props.children}
        </div>
      </button>
    );
  }
}

// propTypes definition
Button.propTypes = {
  // The HTML tag button type
  type: PropTypes.oneOf(['button', 'submit', 'reset']),

  // Defines if Button will have the `primary` style
  primary: PropTypes.bool,

  // Function executed on click
  onClick: PropTypes.func,

  // Optional className applied to Button
  className: PropTypes.string,

  // This is the content of Button (usually text)
  children: PropTypes.node.isRequired,
};

export default Button;

I’m using as base react-boilerplate.

[ChristopherBiscardi]

Temporary fix is to use module.exports instead of export default

– Bug

import React, { Component } from 'react';

export default class Test extends Component {
  static propTypes = {
    title: React.PropTypes.string.isRequired
  }
  render() {
    return (
      <div>{this.props.title}</div>
    )
  }
}

– Good

import React, { Component } from 'react';

module.exports =  class Test extends Component {
  static propTypes = {
    title: React.PropTypes.string.isRequired
  }
  render() {
    return (
      <div>{this.props.title}</div>
    )
  }
}

[ChristopherBiscardi]

I’ll make a note to produce a minimal case. Won’t get to it until tomorrow though.