Managementform error client-side

[ericdfields]

I'm running into issues validating a Formset on the client-side. I'm getting the same error in your example: ManagementForm data is missing or has been tampered with

Code below. There's some mutable array vars that aren't included but can be inferred. I get that error in the debugger statement below:

this.state.emailAddressForms.nonFormErrors().data[0] => "ManagementForm data is missing or has been tampered with"

var EmailAddressForm = forms.Form.extend({
  value: forms.EmailField({label: "Email Address"}),
  is_primary: forms.BooleanField({required: false})
})

var EmailAddressFormSet = forms.FormSet.extend({form: EmailAddressForm})

var PatientForm = forms.Form.extend({
  __mixins__: [vForms.presets.person],
  birth_date: vForms.fields.datepicker(),
  can_share_name: forms.BooleanField({required: false}),
  can_contact: forms.BooleanField({
    label: 'Contact Dr',
    required: false
  }),
  is_care_giver: forms.BooleanField({
    label: 'Is Caregiver',
    required: false
  }),
  age_of_person_cared_for: forms.IntegerField({
    label: 'Age of Cared For Patient',
    required: false
  }),
  will_consider_specialist: forms.BooleanField({required: false}),
  gender: vForms.fields.select({
    choices: GENDER, 
    required: false
  },false),
  patient_type: vForms.fields.select({
    choices: PATIENT_TYPES, 
    required: false
  },true),
  priority: vForms.fields.select({
    choices: PRIORITIES,
    required: false
  },true),
  status: vForms.fields.select({
    choices: STATUS,
    required: false
  },true)
})

var Patient = React.createClass({

  mixins: [vForms.mixins],

  getInitialState: function() {
    return {
      emailAddressForms: new EmailAddressFormSet({
        initial: this.props.data.email_addresses,
        prefix: this.prefix('email'),
        onChange: this.forceUpdate.bind(this)
      }),
      cleandData: false
    }
  }, 

  renderEmailAddressForms: function() {
    return this.state.emailAddressForms.forms().map(function(form, i)  {
      return (
        <forms.RenderForm form={form} />
      )
    })
  },

  validateEmailAddresses: function() {
    return this.state.emailAddressForms.validate()
  }

  onSubmit: function(e) {
    e.preventDefault()
    var patientForm = this.refs.patientForm.getForm()
    var isFormValid = patientForm.validate()
    var cleanedData = false
    if (this.validateEmailAddresses()) {
      cleanedData = _.extend({
        patient: patientForm.cleanedData
      })
    }
    this.setState({cleanedData: cleanedData})
    debugger
  },

  render: function() {
    console.log(this.props.data)
    return (
      <form onSubmit={this.onSubmit} action={this.props.action} method={this.props.method}>
        <forms.RenderForm form={PatientForm} ref="patientForm" data={this.props.data} />
        <this.renderEmailAddressForms ref="emailAddressForm" />
        <p><a onClick={vForms.utils.partial(this.addAnother, this.state.emailAddressForms)}>+ add another email</a></p>
        <button type="submit">{this.props.submitButtonText}</button>
      </form>
    )
  }
})

[insin]

Are you browserifying your code? If so, are you disabling the "detect globals" setting? If not, is there anything in your code that could be introducing a process global?

I suspect the environment checking might need a tweak, as it currently does this:

module.exports = {
  browser: typeof process == 'undefined'
}

The error you see is guarded by a !env.browser check, so my suspicion is that there's a process global being introduced on the client side.

[ericdfields]

I used webpack to build. I'll double check my settings and get back to you. Thanks for the speedy response.

[insin]

Looks like process is a default in webpack: http://webpack.github.io/docs/configuration.html#node

Have to run now. but will release a fix in a couple of hours.

The workaround for now should be to disable insertion of a process global by whatever bundler you're using.

[ericdfields]

I got it building w/ your gulp defaults and I no longer receive the error. Thank you.

I'm coming at node from a ruby/sprockets background through libraries like this. I've found that there's a million and one ways to package node libs for the browser, so I'm not yet in the habit of looking at things like gulpfiles to see if all I have to do is run a command. Might want to add a quick note in the readme :).

[insin]

My bad in this case, it's common for bundlers to shim process so shouldn't have used it for an "are we in the browser?" check.