Browserify seems to not be able to reference the same module if there are different paths (because of subdirectories?) Previously: Difficulty with dynamic components in React. Form (works) -> Field (works) -> Text (fails with "Object [object Object] has no method 'value' ). Apparently the mixins don't get mixed

mixins:field-mixin.js

var FieldMixin = {
  value: function() {
    return 'default value';
  }
};

views:field.jsx

var FieldMixin = require('../mixins/field-mixin'); // Notice the path (1 level)

var Fields = {
  'text': require('./fields/text.jsx')
};

var Field = React.createClass({
  mixins: [FieldMixin],
  render: function() {
    var field     = Fields[this.props.type];
    var component = field(this.props);
    
    return (
      <div class="row">
        <label>Default value: {this.value()}</label>
        {component}
      </div>
    );
  }
});

views:fields:text.jsx

var FieldMixin = require('../../mixins/field-mixin'); // Notice the path (2 levels)

var Text = React.createClass({
  mixins: [FieldMixin],
  render: function() {
    return (
      <input type="text" value={this.value()} />
    );
  }
});

views:form.jsx

// Request dynamic "text" template
var Form = React.createClass({
  render: function() {
    return (
      <form>
        <Field type="text" />
      </form>
    );
  }
});

I'm using Browserify for pulling in require('field-mixin.js').

> console.log(Field().constructor.prototype);
__reactAutoBindMap: Object
constructor: function (initialProps, children) {
render: function () {
value: function (value) {
...

> console.log(Fields['text']().constructor.prototype);
...
constructor: function (initialProps, children) {
render: function () {
...